Summary:

Java Tool-Tip Rollovers in Dreamweaver

   ●  Make a Tool-Tip Window Pop-UP on rollover using jQuery.


Learn About:

jQuery Div Styling
Image Maps Alt tags

This tutorial is part of a series:

1 - 175_java_tooltip_Dw    2 - 64_style_apdiv_Dw.htm    3 - 95_float_animated_gif_Dw.htm  4 - More    5 - More     6 - More   7 - More  

  •   This tutorial is part of the What in the World? Project.

Other People's Work:

Here are examples of work inspired by this tutorial.

europe Hover over England
Exotic Egypt
Exotic Egypt

animated flagEngland 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 … )

local-root-folder-2.jpg


Step #2: Download jQuery ~

jQuerey is a JavaScript library needed for this to work.

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

jquery root folder


Step #4: Link the File ~

Copy this code …

 

<script type="text/javascript" src="jquery.js"></script>


… click Split to reveal the code on your map page …

split-reveal-code.jpg

… and paste the copied code just ABOVE last head tag.

paste code head tag


Step #5: javascript ~

Now copy this code …

                  
<script type="text/javascript">  

$(document).ready(function() {	

	$('#hotspot1').mouseover(function(){
		$('#apDiv1').show("slow").fadeIn("slow"); 			 				
	}) 	

	$('#hotspot1').mouseout(function(){			 			
		$('#apDiv1').hide("slow").fadeOut("slow"); 			 				
	}) 

}); 
  
</script>

… look for the <head> </head> tags …

head tags

… and paste it above the last </head> tag also.

java code pasted


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:

image map

… 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 …

image map selected

… 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.

preview

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.

upload your site

Attach the URL of your site, and continue working


Other Resources: http://api.jqueryui.com/category/effects/