Link 1
Link 2
Link 3
No Link 4
Link 5
Link 6
No Link 8
Show image on mouseover with text
Back to Progrower.coffeecup.com
Make your images the size you want and add them to a file in VSD. Lets call the new folder moverpics. To add the folder hit ctrl + alt + f then click on {Root} then click the add folder icon at the bottom left.
Download these two files by right click save as. After you have them saved add them to the {Root} of your site.
ddimgtooltip.js
ddimgtooltip.css
Setup your text or picture links that go on your page by pasting each one in its own HTML box. Paste to the body HTML.
<a href="http://coffeecup.com" rel="imgtip[0]">Link 1</a>
<a href="http://coffeecup.com" rel="imgtip[1]">Link 2</a>
<a href="http://www.dynamicdrive.com" rel="imgtip[2]">Link 3</a>
<a rel="imgtip[3]" style="text-decoration:none"><font size="5" face="Andalus" color="#800000"><b> No Link 4</b></font></a>
This one has no link asigned to it.
Link 1 above
See #4 below
Now in VSD click on the page your working with then at the top of VSD click on "Edit" then "Edit Header" (ctrl + alt + h). Paste this code to the Header HTML (Ctrl + V).
Step 5 Now you need to tweak the code to point to your images. Browse to where you saved the file ddimgtooltip.js and right click then click open with and select notepad. Now look for the part of the code that looks like what I have below. It's near the top.
tooltips[0]=["red_balloon.gif", "Here is a red balloon<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.", {background:"#DDECFF", width:"200px"}]
tooltips[2]=["dynamicindex14/winter.jpg"]
tooltips[3]=["dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white", font:"bold 12px Arial"}]
tooltips[0]=["moverpics/chip-color-collarprofile.jpg", "Here is my dog chip<br /> on a white background", {background:"#FFFFFF", color:"black", border:"5px ridge darkblue"}]
tooltips[1]=["moverpics/scott.jpg", "Here is a Scott on a light blue background.", {background:"#DDECFF", width:"200px"}]
tooltips[2]=["moverpics/chipstpatrick.jpg"]
tooltips[3]=["moverpics/tomalicious.png", "My friend Tomalicious.", {background:"white", font:"bold 12px Arial"}]
tooltips[4]=["moverpics/moon.gif", "This is the Moon<br /> on a blue background", {background:"#0080FF", color:"Red", border:"8px ridge darkblue"}]
tooltips[5]=["moverpics/sun.gif", "Here is the sun on a red background.", {background:"#FF0000"}]
tooltips[6]=["moverpics/ericchip.jpg" , "Now I'm bigger."]
tooltips[7]=["moverpics/scubadiver.gif", "Scuba diver.", {background:"white", font:"bold 15px Arial"}]
Before
After
Tweak the code to your image names and folder name and save it.
Now just republish your site.
I've added more lines to the .js file code to accomodate more pics.
<a href="http://aol.com" rel="imgtip[4]">Link 5</a>
<a href="http://selkirklake.net" rel="imgtip[5]">Link 6</a>
<a href="http://ericrohloff.com" rel="imgtip[6]"><img src="moverpics/smallericchip.jpg" width="100" height="100" alt="" title="" border="0" /></a>
<a rel="imgtip[7]" style="text-decoration:none"><font size="6" face="Verdana" color="#FFF000"><b> No Link 8</b></font></a>
This one uses a small image instead of text.
This is number 7
Link 2 above
Link 3 above
Link 4 above
Link 5 above
Link 6 above
Link 7 above
Link 8 above
Step 1
Step 2
Step 3
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="ddimgtooltip.css" />

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

/***********************************************
* Image w/ description tooltip v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
Step 4