hotspot mouseover to show photo & text

@newbeJan 25.2006

What is the code for the following:

In cell a, an image with hotspots.
Each hotspot shows a different picture and corresponding text.
The picture shows in cell b.
The corresponding text shows in cell c.

for ex.

mouse goes over hotspot 1 which causes photo1 and text1 to appear.

to post a comment

JavaScript

12 Comments(s) _↴

@n00bieguyJan 26.2006 — #yes i am also interested in knowing how to do this. like the shoutouts we see on frappr. any help would be greatly appreciated. thanks!

@vwphillipsJan 26.2006 — #newbe note that please and thank you help

n00bieguy has some manners so

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 </head>
 <script language="JavaScript" type="text/javascript">
 <!--
 function Swap(img,txt){
 document.getElementById('fred').src=img;
 document.getElementById('fredtxt').innerHTML=txt;
 }
 //-->
 </script>
 <body>
 
 </body>
 <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif"
 onmouseover="Swap('http://www.vicsjavascripts.org.uk/StdImages/Two.gif','now put this event call in each ImgMap area tag and change the image ang text as required');"
  >
 <br><br>
 
 <img id="fred" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >
 <div id="fredtxt" style="width:200px;" ></div>
 </html>[/CODE]

@n00bieguyJan 26.2006 — #thanks! that was helpful!

@newbeauthorJan 27.2006 — #Thank you vwphillips for your help but ...

The script is correct for utilizing a "whole" image. I'm looking for using a 'hotspot' on a whole image.

@TheBearMayJan 27.2006 — #Sounds like what you want to use is an image map.

<i>
 </i> &lt;img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" usemap="#ImageMap"&gt;
 ...
 
 &lt;map name="ImageMap"&gt;
 &lt;area shape="polygon" coords=" 431,76 454,76 454,64 431,64 431,76" onmouseover="Swap('http://www.vicsjavascripts.org.uk/StdImages/Two.gif','now put this event call in each ImgMap area tag and change the image ang text as required');" /&gt;
 ....
 &lt;/map&gt;

@newbeauthorJan 27.2006 — #THEBEARMAY,

You are awesome! okay we have it working from just the hotspot but the text isn't showing where there is an image.

Remember, in the last cell, I'm replacing text where an image is located.

The image seems to go away but it seems that it is looking for another image to put there instead of the text. After the mouseover, I get the box with the little red x.

@TheBearMayJan 28.2006 — #Can you post a sample of your code? What's above should work. Check to make sure all of your capitalization agrees - javascript is case sensitive. Some servers are also case sensitive, so make sure your image file names agree with what is on the server.

@newbeauthorJan 30.2006 — #<html>

<script language="JavaScript" type="text/javascript">



</script>

<body>

<table width="685" height="735">

<tr>

 <td width="202" height="81"> 
   <map name="fifthpaw">
   <area shape="polygon" coords="20, 99, 7, 79, 4, 72, 2, 60, 1, 51, 9, 42, 15, 34, 33, 30, 39, 33, 43, 53, 48, 71, 34, 96, 22, 102" OnMouseOver="Swap('photos/tom.jpg','Mr. Tom');" onMouseOut="location.reload()">
   <area shape="polygon" coords="50, 5, 48, 25, 56, 39, 74, 53, 92, 45, 95, 34, 91, 16, 76, 4, 46, 6" onMouseOver="Swap('photos/laura.jpg','Mrs. Ma');" OnMouseOut="location.reload()">
   <area shape="polygon" coords="110, 5, 115, 22, 115, 64, 157, 14, 102" 48, 121, 57, 137, 55, 149, 37, 150, 30, 149, 22, 142, 15, 134, 5, 123, 3" onMouseOver="Swap('staffphotos/max.jpg','Mr. Max');" OnMouseOut="location.reload()">
   <area shape="polygon" coords="152, 82, 166, 60, 174, 52, 183, 62, 183, 81, 183, 102, 183, 105, 162, 102, 154, 94" onMouseOver="Swap('photos/margie.jpg','Ms. Marg');" OnMouseOut="location.reload()">
   </map>
   <img border="0" src="Images/fifthpaw.gif" usemap="#fifthpaw" width="184" height="193">
   </td>
   <td width="134" height="33" valign="top">
   <img border="0" id="photo" src="images/blank.gif" width="103" height="131">
   </td>
   <td width="351" height="81" valign="middle">
   <align="left"><img id="didyouknow" border="0" src="Images/didyouknowimage.gif" align="left" width="335" height="99">
   </td>
  </tr>

</table>

</body>

</html>

@newbeauthorJan 30.2006 — #In the script getElement section.

@TheBearMayFeb 01.2006 — #outerHTML is an IE only extension, so if you can stay away from it you're better off. If you move the id tag from the image to the cell the innerHTML should work for you. Also the reload will eat more time than simply doing another Swap on mouse out. See if this works better for you:

&lt;html&gt;
 &lt;script language="JavaScript" type="text/javascript"&gt;
 &lt;!--
 function Swap(img,txt){
 document.getElementById('photo').src=img;
 document.getElementById('didyouknow').innerHTML=txt;
 }
 
 //--&gt;
 
 
 &lt;/script&gt;
 
 &lt;body&gt;
 
 &lt;table width="685" height="735"&gt;
 &lt;tr&gt;
 
 &lt;td width="202" height="81"&gt;
 &lt;map name="fifthpaw"&gt;
 &lt;area shape="polygon" coords="20, 99, 7, 79, 4, 72, 2, 60, 1, 51, 9, 42, 15, 34, 33, 30, 39, 33, 43, 53, 48, 71, 34, 96, 22, 102" OnMouseOver="Swap('photos/tom.jpg','Mr. Tom');" onMouseOut="Swap('Images/fifthpaw.gif','&lt;img src=Images/didyouknowimage.gif width=335 height=99&gt;');"&gt;
 &lt;area shape="polygon" coords="50, 5, 48, 25, 56, 39, 74, 53, 92, 45, 95, 34, 91, 16, 76, 4, 46, 6" onMouseOver="Swap('photos/laura.jpg','Mrs. Ma');" OnMouseOut="Swap('Images/fifthpaw.gif','&lt;img src=Images/didyouknowimage.gif width=335 height=99&gt;');"&gt;
 &lt;area shape="polygon" coords="110, 5, 115, 22, 115, 64, 157, 14, 102 48, 121, 57, 137, 55, 149, 37, 150, 30, 149, 22, 142, 15, 134, 5, 123, 3" onMouseOver="Swap('staffphotos/max.jpg'','Mr. Max');" OnMouseOut="Swap('Images/fifthpaw.gif','&lt;img src=Images/didyouknowimage.gif width=335 height=99&gt;');"&gt;
 &lt;area shape="polygon" coords="152, 82, 166, 60, 174, 52, 183, 62, 183, 81, 183, 102, 183, 105, 162, 102, 154, 94" onMouseOver="Swap('photos/margie.jpg','Ms. Marg');" OnMouseOut="Swap('Images/fifthpaw.gif','&lt;img src=Images/didyouknowimage.gif width=335 height=99&gt;');"&gt;
 &lt;/map&gt;
 &lt;img border="0" src="Images/fifthpaw.gif" usemap="#fifthpaw" width="184" height="193"&gt;
 &lt;/td&gt;
 &lt;td width="134" height="33" valign="top"&gt;
 &lt;img border="0" id="photo" src="images/blank.gif" width="103" height="131"&gt;
 &lt;/td&gt;
 &lt;td width="351" height="81" valign="middle" id="didyouknow" align="left"&gt;
 &lt;img  border="0" src="Images/didyouknowimage.gif" align="left" width="335" height="99"&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@newbeauthorFeb 01.2006 — #Whewhoooo!!!!! :-)

YES! Thank you.

Now, where can I add font color ?

and

The width of the text is not filling up the entire area of where the image used to be.

This is great, it's finally coming together!

@TheBearMayFeb 01.2006 — #Couple of different ways to deal with font color, but the simplest for the moment would be to attach it to the element, ie:

<td id="didyouknow" style="color:red;width:351px;height:81px;veritical-align:middle;text-align:left">

[size=-2] (I combined all of the other style attributes while I was at it)[/size]

Also in #JavaScript _↴

Obtain data from other website? plz help :p Javascript slider messing up the rest of the site....need help!Setfocus to the body of form

Success!

Help @newbe spread the word by sharing this article on Twitter...

Tweet This

hotspot mouseover to show photo & text

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

hotspot mouseover to show photo & text

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴