Need a little bit of magic!

JavaScript
1

Hi

I started a new page and need a bit of magic.

http://pintotours.net/TEMP/FLAG/Blog.html

I have blocks of little boxes with flags and country names. Some will be highlighted meaning that the chain has hotels there. To save having to write a few hundred extra pages to tell in which cities, I wonder if some kind soul could give me some code so that when someone hovers over a particular country, it will produce a little popup with a list of the cities.

is that easy? “onclick” ?

Thank you

2

Hi qim

Someone will probably improve on this, but you can use:

<script>
function popup(){
  popupWindow = window.open('popup.html','','scrollbars=yes,width=430,height=200'); 
}
</script>

and the anchor:

<a href="javascript:popup()">show popup</a>
3

better make that

<span onclick="popup()" style="cursor: pointer;">show popup</span>
4

Hi thanks both

meanwhile I’ve been reading on tooltips. Is that a better or worse solution?

5

depending on the amount of information and the desired display options I would rather classify as better than worse. (mostly due to it not being subject to aggressive popup blocking)

6

I tried it in Andorra (see page, please, and something’s gone a bit wrong.

7

Well, it’ll be a list of cities. In some cases extensive and in others only 1 or 2. If extensive I may refer to the appropriate webpage.

In any case visitors will be told what to expect and do when they hover over the country

8

you haven’t defined the popup() function.

9

Ahhhh… and where do I do that?

Sorry but this sort of code is Chinese to me…

10

either in an external script file or between <script> tags (as shown by gandalf458)

JavaScript, not Chinese. two completely different grammars (Chinese is way more context-sensitive than JS)

1 Like
11

The <script> … </script> bit goes in the body of your page.

12

maybe you should just hire someone to do it.

13

Hi

I had inserted Dormlich’s code in ONE line of the html

Now, that he mentions script I guess this is it

<script>
function popup(){
  popupWindow = window.open('popup.html','','scrollbars=yes,width=430,height=200'); 
}
<\script>

but don’t know where to put his bit of code

14

once you fix the closing script tag (</script>) you put it just before the closing body tag.

15

Oops, that’s my mistake!

16

Right!

I put the script in the head of the file

I inserted that other code span/span in one of the lines

Now when I pressed the link the page diappeared and I got a white page. I assume this is because I will need to write a html page to be called by the script, i.e. popup.html

<script>
function popup(){
  popupWindow = window.open**('popup.html**','','scrollbars=yes,width=430,height=200'); 
}
<\script>
17

you haven’t fixed gandalf’s typo yet.

18

I’ve fixed it in post #2 if it helps qim

19

Anything helps qim!

So, I inserted this in one specific line

<a href="javascript:popup()">show popup</a>

<li><a href="javascript:popup()"><button style="background-image:url(images/Newbutton.png); color:green; font-weight:bold; background:#ffffb3; border:1px solid #999;border-radius:4px;"><img src="flags/ad.png" alt="Andorra">Andorra</button></a></li>

This is now at the bottom of the page

    <script>

function popup(){
popupWindow = window.open(‘/Pinto/guides.html’,‘’,‘scrollbars=yes,width=430,height=200’);
}

As I do not have yet any popup.html I substituted that for an odd ols page, but nothing happens! (It’s fun, though…!)

20

almost the same reason as last time. you should familiarise yourself with the syntax of HTML. blind copy/paste creates more problems than it solves.

note: use the error console (F12).