PDA

View Full Version : Javascript onMouseOver Image Borders?

mattjgreene
10-07-2004, 09:35 PM
I'm kind of new to this HTML/Javascript thing, so stick with me here. :)

I'm trying to use a large image as a type of imagemap with rollover images for each link. I decided to break the large image into 7 smaller images, stick them all together on the page so they appear as one, and then make some of them into rollover links. The 7 piece image worked great until I began turning them into link. Now I have a white border around each link, even though the border has been set to "0".

Here's my code. I'll have the actual page up once I can get it on my hosting account.

<html>
<head>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
//JavaScript Simple Image Rollover Code
//copyright daxassist, 2000-2004
//visit http://www.daxassist.com for this and other javascripts with full tutorials.

if(document.images) {
pics = new Array();
pics[01] = new Image();
pics[01].src = "2.bmp";
pics[02] = new Image();
pics[02].src = "2rollover.bmp";
pics[03] = new Image();
pics[03].src = "3.bmp";
pics[04] = new Image();
pics[04].src = "3rollover.bmp";
pics[05] = new Image();
pics[05].src = "4.bmp";
pics[06] = new Image();
pics[06].src = "4rollover.bmp";
}
function changer(from,to) {
if(document.images) {
document.images[from].src = pics[to].src;
}
}
//-->
</SCRIPT>
</head>

<body>
<div align="center">
<img src="top.bmp"><br>
<img src="1.bmp">

<!-- ROLLOVER IMAGE LEFT HAND -->
<a href="http://www.apple.com" onMouseOver="changer('lefthand',02)" onMouseOut="changer('lefthand',01)"><img name="lefthand" id="lefthand" src="2.bmp" border="0"></a>
<!-- ROLLOVER IMAGE LEFT HAND -->

<!-- ROLLOVER IMAGE MIDDLE HAND -->
<a href="http://www.apple.com" onMouseOver="changer('middlehand',04)" onMouseOut="changer('middlehand',03)"><img name="middlehand" id="middlehand" src="3.bmp" border="0"></a>
<!-- ROLLOVER IMAGE MIDDLE HAND -->

<!-- ROLLOVER IMAGE RIGHT HAND -->
<a href="http://www.apple.com" onMouseOver="changer('righthand',06)" onMouseOut="changer('righthand',05)"><img name="righthand" id="righthand" src="4.bmp" border="0"></a>
<!-- ROLLOVER IMAGE RIGHT HAND -->

<img src="5.bmp"><br>
<img src="bottom.bmp"><br>
</div>
</body>
</html>
mattjgreene
10-07-2004, 09:51 PM
Here's a screen capture of what's going on.
maxadim
10-10-2004, 06:23 AM
Try changing <a href="http://www.apple.com" to <a onClick="window.location = 'http://www.apple.com'" style="cursor:hand"
senshi
10-10-2004, 06:37 PM
<img

Your missing something from this tag....

like border="0"> for instance.

if you look in your web editor, you will find in the page properties that you can tell the editor to put in the info to make sure that borders are not displayed as well as links colours the margins, etc....