onmouseover effect

Ares · #1 (**permalink**) 05-13-06, 06:24 PM

Ok, this one is annoying me, what i ahev at the moment is a dreamweaver website, i have a contents image which have hotlinks within the image (on top or however dreamweaver does it) which forward to different pages. To make the contents images more interactive ive made different variations of the image for indepentant link hotspots. I want to know how to use "onmouseover" or something else which you can suggest to make it so when my mouse hovers over a hotspot then the image will change to the one which i want (call it "X[no.]" for example).

Thanks in advanced.

Ares · #2 (**permalink**) 05-14-06, 10:12 AM

would it be possible to do this in flash?... e.g.

Have the image, then when the mouse is in a specified position the image changes accordingly.

Nico · #3 (**permalink**) 05-14-06, 10:42 AM

Here's an example, assuming your hotspot looks like this more or less:

Code:

<map name="map1">
	<area coords="19,44,45,11,87,37,82,76,49,98" href="http://www.yoursite.com">
</map>

Add this into the page head

Code:

<script type="text/javascript">

function ImageSwitch(id, url)
{
	document.getElementById(id).src = url;
}

</script>

And add this to your hotspot:

Code:

onmouseover="ImageSwitch('img1', 'image2.jpg');"

"img1" should be the image ID, and "image2.jpg" the new image url.

Should look like this now

Code:

<map name="map1">
	<area coords="19,44,45,11,87,37,82,76,49,98" href="http://www.yoursite.com" onmouseover="ImageSwitch('img1', 'image2.jpg');">
</map>

Now give every image an unique ID.

Code:

<img src="image.jpg" usemap="#map1" border="0" id="img1">

And make sure to give the mouseover event the right ID and url.

if you want to restore the old images on mouseout, just call the same function on the mouseout event.

Code:

onmouseout="ImageSwitch('image_id', 'old_image.jpg');"

Here all together

Code:

<script type="text/javascript">

function ImageSwitch(id, url)
{
	document.getElementById(id).src = url;
}

</script>


<img src="image1.jpg" usemap="#map1" border="0" id="img1">

<map name="map1">
	<area coords="19,44,45,11,87,37,82,76,49,98" href="http://www.yoursite.com" onmouseover="ImageSwitch('img1', 'image2.jpg');">
</map>

Ares · #4 (**permalink**) 05-14-06, 11:03 AM

i did that all, and it didn't work, my layout is different cos im using dreamweaver, but i added all nessecery code and it didn't work

, if you want, you can add me msn to discuss this further: stefandunn@gmail.com.

Thanks anyway.

Ares · #5 (**permalink**) 05-14-06, 02:43 PM

ok, i managed to get it to do onmouseover but not onmouseout

, is there a way to not use id's but instead all urls?

TwoD · #6 (**permalink**) 05-16-06, 12:45 AM

Could you post the code you have so far?
That would help a lot.
And also, please use the edit function to append new info to the last post if it's yours. Unless it's so old it's dropped down a lot in the list and needs to be bumped up to be noticed.

Ares · #7 (**permalink**) 05-16-06, 10:24 AM

Code:

<html>
<head>
<title>The3dsite.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#ffffff" background="The3dsite_bg.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="780">
    <tr> 
    <td><img src="spacer.gif" width="15" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="192" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="34" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="10" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="445" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="68" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="16" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="7"><img name="The3dsite_r1_c1" src="The3dsite_r1_c1.jpg" width="780" height="219" border="0" alt="logo"></td>
    <td><img src="spacer.gif" width="1" height="219" border="0" alt=""></td>
  </tr>
  <tr> 
    <td rowspan="6"><img name="The3dsite_r2_c1" src="The3dsite_r2_c1.jpg" width="15" height="581" border="0" alt="leftside"></td>
    <td rowspan="5"><img src="The3dsite_r2_c2_1.jpg" alt="contents" name="normal" width="192" height="564" border="0" usemap="#The3dsite_r2_c2Map" id="normal"></td>
    <td rowspan="4" colspan="2"><img name="The3dsite_r2_c3" src="The3dsite_r2_c3.jpg" width="44" height="554" border="0" alt="centerbars"></td>
    <td background="The3dsite_r2_c4.jpg"><p align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><BODY> 
        <SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!--  Author: www.cgiscript.net  -->

<!-- Begin

// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
								}

// Join it all together
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;

// Print out the data.
document.write(today);

//  End -->
</script><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
        </td>
    <td rowspan="2" colspan="2"><img name="The3dsite_r2_c5" src="The3dsite_r2_c5.jpg" width="84" height="53" border="0" alt="inforight"></td>
    <td><img src="spacer.gif" width="1" height="27" border="0" alt=""></td>
  </tr>
  <tr> 
    <td><img name="The3dsite_r3_c4" src="The3dsite_r3_c4.jpg" width="445" height="26" border="0" alt="infobottom"></td>
    <td><img src="spacer.gif" width="1" height="26" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="2" align="center" valign="top" background="The3dsite_r4_c4.jpg"><p align="justify"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Welcome 
        to the3dsite.com, one of the most comprehensive and reliable 3d resources 
        website. Take advantage of the great tutorials, combine other users 3d 
        models and graphics with your own projects. Download high-resolution textures 
        to help you create your best 3d artworks.</font></p>
      <p align="justify"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Some 
        users may wish to give away there resources for those who wish not to 
        pay for them. Either way this website is the best way to get at it. Signup 
        today to start buying and selling.</font></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><img src="signup.jpg" width="150" height="150" border="0" align="baseline" usemap="#Map"> </p></td>
    <td rowspan="2"><img name="The3dsite_r4_c6" src="The3dsite_r4_c6.jpg" width="16" height="501" border="0" alt="rightside"></td>
    <td><img src="spacer.gif" width="1" height="432" border="0" alt=""></td>
  </tr>
  <tr> 
    <td colspan="2"><img name="The3dsite_r5_c4" src="The3dsite_r5_c4.jpg" width="513" height="69" border="0" alt="copyright"></td>
    <td><img src="spacer.gif" width="1" height="69" border="0" alt=""></td>
  </tr>
  <tr> 
    <td rowspan="2"><img name="The3dsite_r6_c3" src="The3dsite_r6_c3.gif" width="34" height="27" border="0" alt="content bottomright"></td>
    <td rowspan="2" colspan="4"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Content 
        copyrighted by respectful owners 2006 &copy;</font></div></td>
    <td><img src="spacer.gif" width="1" height="10" border="0" alt=""></td>
  </tr>
  <tr> 
    <td><img name="The3dsite_r6_c2" src="The3dsite_r6_c2.jpg" width="192" height="17" border="0" alt="contentsbottom"></td>
    <td><img src="spacer.gif" width="1" height="17" border="0" alt=""></td>
  </tr>
</table>
<map name="The3dsite_r2_c2Map">
  <area shape="poly" coords="61,334,70,369,162,329,150,294" href="#">
  <area shape="poly" coords="20,134,13,162,34,170,42,176,50,185,59,192,72,194,79,202,89,207,106,193,92,172,66,165,55,155,47,146,34,138" href="#">
  <area shape="poly" coords="12,407,34,403,47,402,63,401,83,399,101,399,118,400,120,421,98,425,73,426,45,431,24,436,13,437" href="#">
  <area shape="poly" coords="93,152,94,128,102,115,110,103,125,94,138,90,153,90,163,87,166,82,180,89,180,104,155,110,136,112,125,129,120,144,119,150" href="#">
  <area shape="poly" coords="13,91,44,89,63,80,85,71,92,64,83,46,66,48,48,59,29,62,11,63,9,64,6,77" href="#">
</map>
<map name="Map">
  <area shape="circle" coords="75,72,63" href="#">
</map>
</body>
</html>

TwoD · #8 (**permalink**) 05-16-06, 12:40 PM

Code:

<html>
<head>
<script type="text/javascript">

function ImageSwitch(id, url)
{
	document.getElementById(id).src = url;
}
</script>

<title>The3dsite.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#ffffff" background="The3dsite_bg.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="780">
    <tr>
    <td><img src="spacer.gif" width="15" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="192" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="34" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="10" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="445" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="68" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="16" height="1" border="0" alt=""></td>
    <td><img src="spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="7"><img name="The3dsite_r1_c1" src="The3dsite_r1_c1.jpg" width="780" height="219" border="0" alt="logo"></td>
    <td><img src="spacer.gif" width="1" height="219" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="6"><img name="The3dsite_r2_c1" src="The3dsite_r2_c1.jpg" width="15" height="581" border="0" alt="leftside"></td>
    <td rowspan="5"><img src="The3dsite_r2_c2_1.jpg" alt="contents" name="normal" width="192" height="564" border="0" usemap="#The3dsite_r2_c2Map" id="normal"></td>
    <td rowspan="4" colspan="2"><img name="The3dsite_r2_c3" src="The3dsite_r2_c3.jpg" width="44" height="554" border="0" alt="centerbars"></td>
    <td background="The3dsite_r2_c4.jpg"><p align="right"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><BODY>
        <SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!--  Author: www.cgiscript.net  -->

<!-- Begin

// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thu  rsday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','  June','July','August','September','October','Novem  ber','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number)	{
	return (number < 1000) ? number + 1900 : number;
								}

// Join it all together
today =  days[now.getDay()] + ", " +
         months[now.getMonth()] + " " +
         date + ", " +
         (fourdigits(now.getYear())) ;

// Print out the data.
document.write(today);

//  End -->
</script><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
        </td>
    <td rowspan="2" colspan="2"><img name="The3dsite_r2_c5" src="The3dsite_r2_c5.jpg" width="84" height="53" border="0" alt="inforight"></td>
    <td><img src="spacer.gif" width="1" height="27" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img name="The3dsite_r3_c4" id="The3dsite_r3_c4ID" src="The3dsite_r3_c4.jpg" width="445" height="26" border="0" alt="infobottom"></td>
    <td><img src="spacer.gif" width="1" height="26" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2" align="center" valign="top" background="The3dsite_r4_c4.jpg"><p align="justify"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Welcome
        to the3dsite.com, one of the most comprehensive and reliable 3d resources
        website. Take advantage of the great tutorials, combine other users 3d
        models and graphics with your own projects. Download high-resolution textures
        to help you create your best 3d artworks.</font></p>
      <p align="justify"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Some
        users may wish to give away there resources for those who wish not to
        pay for them. Either way this website is the best way to get at it. Signup
        today to start buying and selling.</font></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p><img src="signup.jpg" width="150" height="150" border="0" align="baseline" usemap="#Map"> </p></td>
    <td rowspan="2"><img name="The3dsite_r4_c6" src="The3dsite_r4_c6.jpg" width="16" height="501" border="0" alt="rightside"></td>
    <td><img src="spacer.gif" width="1" height="432" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="2"><img name="The3dsite_r5_c4" src="The3dsite_r5_c4.jpg" width="513" height="69" border="0" alt="copyright"></td>
    <td><img src="spacer.gif" width="1" height="69" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="2"><img name="The3dsite_r6_c3" src="The3dsite_r6_c3.gif" width="34" height="27" border="0" alt="content bottomright"></td>
    <td rowspan="2" colspan="4"><div align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Content
        copyrighted by respectful owners 2006 &copy;</font></div></td>
    <td><img src="spacer.gif" width="1" height="10" border="0" alt=""></td>
  </tr>
  <tr>
    <td><img name="The3dsite_r6_c2" src="The3dsite_r6_c2.jpg" width="192" height="17" border="0" alt="contentsbottom"></td>
    <td><img src="spacer.gif" width="1" height="17" border="0" alt=""></td>
  </tr>
</table>
<map name="The3dsite_r2_c2Map">
  <area shape="poly" coords="61,334,70,369,162,329,150,294" href="#" onmouseover="ImageSwitch('The3dsite_r3_c4ID','image1.jpg')" onmouseout="ImageSwitch('The3dsite_r3_c4ID','The3dsite_r3_c4.jpg')">
  <area shape="poly" coords="20,134,13,162,34,170,42,176,50,185,59,192,72,194,7  9,202,89,207,106,193,92,172,66,165,55,155,47,146,3  4,138" href="#" onmouseover="ImageSwitch('The3dsite_r3_c4ID','image1.jpg')" onmouseout="ImageSwitch('The3dsite_r3_c4ID','The3dsite_r3_c4.jpg')">
  <area shape="poly" coords="12,407,34,403,47,402,63,401,83,399,101,399,118,400  ,120,421,98,425,73,426,45,431,24,436,13,437" href="#" onmouseover="ImageSwitch('The3dsite_r3_c4ID','image2.jpg')" onmouseout="ImageSwitch('The3dsite_r3_c4ID','The3dsite_r3_c4.jpg')">
  <area shape="poly" coords="93,152,94,128,102,115,110,103,125,94,138,90,153,90  ,163,87,166,82,180,89,180,104,155,110,136,112,125,  129,120,144,119,150" href="#" onmouseover="ImageSwitch('The3dsite_r3_c4ID','image3.jpg')" onmouseout="ImageSwitch('The3dsite_r3_c4ID','The3dsite_r3_c4.jpg')">
  <area shape="poly" coords="13,91,44,89,63,80,85,71,92,64,83,46,66,48,48,59,29  ,62,11,63,9,64,6,77" href="#" onmouseover="ImageSwitch('The3dsite_r3_c4ID','image4.jpg')" onmouseout="ImageSwitch('The3dsite_r3_c4ID','The3dsite_r3_c4.jpg')">
</map>
<map name="Map">
  <area shape="circle" coords="75,72,63" href="#">
</map>
</body>
</html>

Bold sections were added.

The id:s are used so the ImageSwitch can be used for any image, in case you want to use it somewhere else too.

Note that the forum inserts spaces if there are more than 50 characters in a row, so those must be removed.

Ares · #9 (**permalink**) 05-16-06, 02:30 PM

how can i give images IDs if they arnt seen on the page because they arn't in the code, is there a way to make images invisible or so?

TwoD · #10 (**permalink**) 05-16-06, 02:50 PM

The id belongs to the <img> tag, not the actual image.
document.getElementById(id).src="someimage.jpg" gets a handle to that tag and changes its src attribute to a new filename. That will cause the new image to replace the old one.