| | |
Help with SWAP IMAGE
Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
[html]<tr>
<td height="123" bgcolor="#FFFFFF"><table width="140" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#999999">
<tr>
<td width="65" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone Us','','basic_interface/symbols/phone_over.jpg',1)"><img src="basic_interface/symbols/phone.jpg" alt="Phone Us" name="Phone Us" width="40" height="40" border="0" id="Phone Us" onmouseover="MM_swapImage('detail','','basic_interface/symbols/phone_num.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone us','','basic_interface/symbols/phone_over.gif',1)"></a></div></td>
<td width="69" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="center"><a href="mailto: sigsol@btconnect.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('email us','','basic_interface/symbols/email.jpg',1)"><img src="basic_interface/symbols/email_over.jpg" alt="Email Us" name="email us" width="40" height="40" border="0" id="email us" onmouseover="MM_swapImage('detail','','basic_interface/symbols/email_detail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div></td>
</tr>
<tr>
<td colspan="2" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img src="basic_interface/symbols/detail_out.jpg" alt="Rollover the phone or email symbol above and the detail will show here" name="detail" width="140" height="25" id="detail" /></td>
</tr>
</table></td>
</tr>[/html]
This is my code to onmouseover swap current image and and different image and then restore both images.
But when I you move the mouse out the "different" image doesn't swap restore. Please could somebody tell me why this is. I used dreamweaver to do this and it has never done this wrong before.
Thanks for your help.
<td height="123" bgcolor="#FFFFFF"><table width="140" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#999999">
<tr>
<td width="65" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone Us','','basic_interface/symbols/phone_over.jpg',1)"><img src="basic_interface/symbols/phone.jpg" alt="Phone Us" name="Phone Us" width="40" height="40" border="0" id="Phone Us" onmouseover="MM_swapImage('detail','','basic_interface/symbols/phone_num.jpg',1)" onmouseout="MM_swapImgRestore()" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Phone us','','basic_interface/symbols/phone_over.gif',1)"></a></div></td>
<td width="69" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><div align="center"><a href="mailto: sigsol@btconnect.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('email us','','basic_interface/symbols/email.jpg',1)"><img src="basic_interface/symbols/email_over.jpg" alt="Email Us" name="email us" width="40" height="40" border="0" id="email us" onmouseover="MM_swapImage('detail','','basic_interface/symbols/email_detail.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div></td>
</tr>
<tr>
<td colspan="2" bordercolor="#CCCCCC" bgcolor="#CCCCCC"><img src="basic_interface/symbols/detail_out.jpg" alt="Rollover the phone or email symbol above and the detail will show here" name="detail" width="140" height="25" id="detail" /></td>
</tr>
</table></td>
</tr>[/html]
This is my code to onmouseover swap current image and and different image and then restore both images.
But when I you move the mouse out the "different" image doesn't swap restore. Please could somebody tell me why this is. I used dreamweaver to do this and it has never done this wrong before.
Thanks for your help.
Well.. you have a big mess there... use this it’s more simple…. I made it my self!
<script type="text/JavaScript">
function rollover_img (bi, im){ // 1 bi = id of the imagem you want to swap; 2 im = the image you want to display
document.getElementById(bi).src = im;
}
</script>
Paste this right before the </HEAD> tag.
Them the image were you want to start the rollover should be something like this..
<img src="1.png" name="Image2" width="161" height="150" border="0" id="Image2" onmouseover="rollover_img('detail','1.png'), rollover_img('Image2','1.png')" onmouseout="rollover_img('detail','2.png'), rollover_img('Image2','2.png')" />
And you are ready to go..
<script type="text/JavaScript">
function rollover_img (bi, im){ // 1 bi = id of the imagem you want to swap; 2 im = the image you want to display
document.getElementById(bi).src = im;
}
</script>
Paste this right before the </HEAD> tag.
Them the image were you want to start the rollover should be something like this..
<img src="1.png" name="Image2" width="161" height="150" border="0" id="Image2" onmouseover="rollover_img('detail','1.png'), rollover_img('Image2','1.png')" onmouseout="rollover_img('detail','2.png'), rollover_img('Image2','2.png')" />
And you are ready to go..
Last edited by migcosta; Jun 8th, 2006 at 5:35 pm.
![]() |
Similar Threads
- how to make animation bar in vb.net (ASP.NET)
- Help with Swapping Images onclick (JavaScript / DHTML / AJAX)
- Yet another Swap Image thread - with a twist (JavaScript / DHTML / AJAX)
- Image Swap Problems (JavaScript / DHTML / AJAX)
- swap_image(): failed (JavaScript / DHTML / AJAX)
- swap image problems in dreamweaver (Site Layout and Usability)
- Need help with Image Swaping in Javascript (JavaScript / DHTML / AJAX)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Making Webpages that conform to the users resolution
- Next Thread: sitemap partially indexed
| Thread Tools | Search this Thread |
blogging content customer design development dreamweaver duplicate email evaluation filesharing firefox flash gilbane google html itunes javascript kazaa layout music napster peertopeer photoshop remote remoteserver satellitenavigation satnav server site tables template tips tomtom url wave web website websitedesignreview web_development web_sites






