PDA

Click to See Complete Forum and Search --> : swap image

tiger66
07-30-2003, 10:53 AM
Hi
I am just wondering how can I swap images with javascrip
I used onMouseOver. It swaps image but it doesn't swap back when my mouse is out

Thanks
pyro
07-30-2003, 10:56 AM
Post the code you have so far, and we can show you what you need to do onmouseout (basically, the same as onmouseover, just with the original image)
tiger66
07-30-2003, 11:04 AM
function change(id)
{
if(id=="airfield"){
document.airfield.src="images/airfield(title)o.gif";
}

}

<img src="images/airfield(title).gif" name="airfield" width="250" height="50" onMouseOver="change('airfield');">
pyro
07-30-2003, 11:10 AM
<script type="text/javascript">
function change(id) {
if (id == "airfield") {
document.airfield.src="images/airfield(title)o.gif";
}
}
function changeBack(id) {
if (id == "airfield") {
document.airfield.src="images/airfield(title).gif";
}
}
</script>
</head>
<body>
<img src="images/airfield(title).gif" name="airfield" alt="Your alternate text" width="250" height="50" onmouseover="change('airfield');" onmouseout="changeBack('airfield');">
tiger66
07-30-2003, 11:47 AM
Hi
After I add the link to my image
<a href="http://cnn.com" ><img src="images/airfield(title).gif" name="airfield" width="250" height="50" onMouseOver="change('airfield');" onMouseOut="changeback('airfield');"></a>

I am getting a border around my image, how can I get rid of the border?

Thanks
pyro
07-30-2003, 11:55 AM
Either add border=0 to the image, or get rid of the borders on all your images right away, by adding this to the <head>

<style type="text/css">
img {
border: none;
}
</style>

Also, unless you renamed the function, changeback('airfield'); needs to be changeBack('airfield');