Image map with popup effect hotspot... HELP!

Hello, I am just starting my jazz band web… on it, I have an image with notes on it… I want the user to be able to click on each note and then see pop-up information…
I have built a image map… but I don’t know how to create this popup effect.

All I have found is clicking on the hotspot and go to another page… but I don’t want this… I want a popup effect…
For instance:

  • clicking on one hotspot, I want comments to appear…
  • clicking on another one, I want some photos to appear…
  • clicking on another one, I want a flash object to be show so some songs can be heard…
    I know how to do it… by going into another page… but I want a popup effect…

Could you help me, please?

It really depends on the amount of text you want to add. If it is just a small, short sentence, you can use the alt and title attributes and write it there (IE uses the alt attribute of an image and shows it as a tooltip while other browsers do this with the title attribute)

If the text is long, then you may want to create a few divs and use some javascript. Each div will have the text for each note, and its display will be set to none by default. When the mouse hovers the note, then you can use javascript to set the display of that particular div to whatever suits your needs.

Thanks for your quick answer… actually for some links I will need several sentences… but for some others, like clicking on the link will show photos… I don’t know how to do it… could you give me an example please? I would really appreciate it since I don’t know a lot about JS…

You could use a script like lightbox - take a look at the demos

Thanks… I will have a look at it… it is not exactly what I am looking for though… because I don’t want to exit the popup effect page… I would have prefered that leaving the active area, the window closes itself… but I guess if I can do something like that to start with I will be happy!!!
Thank you

Can I download it free?

The demos are fine… there are great… but cannot find how to do it!!! I have looked in google… but cannot find “how to use it”…

What should I do?

1: Download the script(s) - http://www.huddletogether.com/projects/lightbox2/#download

2: Upload them to your server
and then follow the instructions on http://www.huddletogether.com/projects/lightbox2/#how

Thanks. I will look into it. Hopefully I won’t have to bother you again!!
Thank you very much once again

I have included these three Javascript files in my header : The 3 scripts are all under the js directory.


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

I have included the Lightbox CSS file. The css file is under the css directory


<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

I have added a rel=“lightbox” attribute to any link tag to activate the lightbox.


<a href="images/not.gif" rel="lightbox" title="my caption">image #1</a>

It does not work at all… anyway I don’t understand how to get the fade effect and how to chose what to show!!!
For instance, I want to show comments, I want to show the flash player, I want to show an image …
I must be doing something really stupid but I don’t know what!!!

Here is my script:


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Pagina nueva 1</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="images/notes.gif" rel="lightbox" title="my caption">image #1</a>

</body>
</html>

I have checked the CSS file and make sure the referenced prev.gif and next.gif files are in the right location.


#prevLink:hover, #prevLink:visited:hover { background: url([B]../images/prevlabel.gif[/B]) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(.[B]./images/nextlabel.gif[/B]) right 15% no-repeat;

Also, I have made sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location


...
LightboxOptions = Object.extend({
    fileLoadingImage:        '../images/loading.gif',
    fileBottomNavCloseImage: '../images/closelabel.gif',
...

HELP!!!

In addition I don’t know asp!

or php!

Well, you don’t need ASP or PHP for that instance. There is one thing that I don’t understand, though… are we talking about Flash here? Because Flash is completely different technology.

What the lightbox does is simply show an image when you hover the link. That image is centered on the screen and automatically changes its size to adapt to the size of the image.

If I remember well, it will not work if you want a Flash player, or a full HTML page, on that area, unless you change the code.

Have you tried the tooltip? As I said, it is easy to implement, and it doesn’t need any programming, but it will only work with short texts, limited to 255 characters

<a href="whaterver.html" title="this will show as a tooltip">link here</a>

or

<a href="whatever.html"><img src="pic.gif" alt="tooltip for IE if there is no title" title="tooltip for any other browsers"></a>

Or is it that you want a more sophisticated effect, such as the one the lightbox provide?

I like slimbox over lightbox…

Let me explain what I need… I am building my jazz band page… On this page, I will have a few links… like “Who we are”, Photos of the group, Videos, Songs we sing.
Each time the user click on one link, I want a pop up effect window to appear.
In one case, the pop up window will show comments…with fading effect or not…
Sometimes it will show photos… and each of them I would like to have the zoom effect
Sometimes it will show videos… don’t know how to do it
Sometimes it will show the song we sing… I have the page that already do that but I need the pop up effect…

I don’t really want to use any tool in particular… I just would like something to work!!!

Help please!

What you want is far away from the newbie level… There’s nothing that I know that can do what you want without being changed and that means programming. How good are you at it?

Didn’t anyone told you that content was king? Much more than the fancy effects.

I’ll try to find something to suit your needs, but I don’t have much hope, honestly.

I know about java and javascript… but I am not a genious at it… if you can help me I would really appreciate it…
Many many thanks

I have to agree with molona on this one - Lightbox is “easy” to implement once you have had a bit of experience doing similar things, but if you’re new to all this then there will be learning curve.

I suggest you concentrate on bulding a basic site to start with and use normal pages instead of your “hotspots” - get the site up and running then come back to the hotspots later on.

I need to test it, but I still think that the easiest way to go around this is using hidden divs, and playing either with the display or the visibility properties.

I will do a test this afternoon, possibly. I let you know the outcome.

I have done it already. I have create my site with frames… and links that go to other pages… It is up and running… but it is not good… I really want to improve it…
If you want to have a look at it… you will understand why I want to improve it… www.jazzcafeparis.es

Please, help me with this!!!