Java Tool-Tip Rollovers in Dreamweaver
● Make a Tool-Tip Window Pop-UP on rollover using jQuery.
✓ jQuery ✓ Div Styling
✓ Image Maps ✓ Alt tags
This tutorial is part of a series:
• This tutorial is part of the What in the World? Project.
Other People's Work:
Here are examples of work inspired by this tutorial.
England is known for its long history.
The Romans called it Britannia and named its major trade center Londinium.
Step #1: Open your Travel Site in Dreamweaver ~
✓ Insert your map in your content area …
✓ Hopefully you've got a content area or somewhere your map can be inserted.
Click inside that area …
✓ … and insert your map.png by clicking there and going to: Insert > Image.
✓ (Remember, all images must to be kept in the local Root Folder of your project … )
Step #2: Download jQuery ~
Go to: http://jquery.com/download/ and click "Download the uncompressed, development jQuery … " and open it in Dreamweaver …
Step #3: Open the File in Dreamweaver ~
✓ Open the file in Dreamweaver and save file in the root folder of this project as: jquery.js
Step #4: Link the File ~
✓ Copy this code …
✓ … click Split to reveal the code on your map page …
✓ … and paste the copied code just ABOVE last head tag.
✓ Now copy this code …
✓ … look for the <head> </head> tags …
✓ … and paste it above the last </head> tag also.
Step #6: Insert a Div ~
✓ Go to: Insert > Layout Objects > AP Div …
✓ … and drag the div where you want it to appear.
Step #7: Type Something ~
✓ Type something in the box - just so you can see it - you can change it later.
Step #8: Image Map ~
✓ Select the your map by clicking on it …
✓ … go to the Properties menu and look for the image map Hotspot icons …
✓ Select the shape that most suits your composition, and draw it …
✓ … then a box pops up:
✓ … which means you've got to name the tag in the "alt" field, down here:
Step #9: Locate your Hotspot code ~
✓ Now select the hotspot by clicking on it …
✓ … and look for the code that controls your hotspot:
Step #10: Code Hints ~
✓ Click inside the code just before the /> and hit "Space," and type: id="hotspot1"
✓ The final code looks something like this:
Step #11: Hotspot ~
✓ Now save your page and view it in a browser.
✓ Now you have your first rollover "hotspot."
Step #12: display : none ~
✓ Lastly, scroll up and find the #apDiv1 code …
✓ … and type display: none;
✓ display: none; makes it invisible when the page loads - it's still there, just hidden.
✓ display: none; makes it disappear.
✓ Change it back and forth between display: block; and display: none; to have the div appear and disappear.
Last Step: Upload your Site ~
✓ Save and upload your files with the completed code.
✓ Attach the URL of your site, and continue working…
Other Resources: http://api.jqueryui.com/category/effects/