General HTML/Web Design Programming Q`s/html image swap

Advertisement


Question
Hello and Thank you!  I use the follow simple html code to swap images:  <img src="details1.png"
onmouseover="this.src='details2.png'"
onmouseout="this.src='details1.png'">

my question is this- instead of using "onmouseout", can details2 be set to display for a set time period, like 5 seconds, and then automatically revert back to details1.

The reason I would like to do this is because the mouseover doesn't work well on mobile devices- details2 stays up until you tap on another image on the page..

I'm hoping that there is a simple html comand to replace "onmouseout"

Answer
To do something like this, you'll first need to add a small bit of Javascript to your page's header like this...


<script type="text/javascript">
<!--
if (document.images)
{
var image_off = new Image();
image_off.src="details1.png";

var image2 = new Image();
image2.src="details2.png";

}

function change1(picName,imgName,delay){
if(change1['timer'+picName])
clearTimeout(change1['timer'+picName]);
if (document.images && imgName)
if(delay){
change1['timer'+picName]=setTimeout(function(){change1(picName,imgName);}, delay);
return;
} else
document[picName].src = imgName.src;
}

//-->
</SCRIPT>


Then your mouseover and mouseout code in the body of the page should look like this...


<img name="pic1" src="details1.png" alt=""
onmouseover="change1('pic1', image2)"
onmouseout="change1('pic1', image_off, 5000)">


Then set your mouseout delay time as seen just above.  5000 = 5 seconds.

General HTML/Web Design Programming Q`s

All Answers


Answers by Expert:


Ask Experts

Volunteer


John Martin

Expertise

I am able to answer any web design related questions including but not limited to html, dhtml, xml, wml, css, php, flash, swf and WAP. I have computers and electronics experience dating before the Military where I served as a tactical telecommunication com center operator in Military Intelligence during Desert Storm (and Desert Shield). I have a total of 22 consecutive years of computer experience (since age 14) and also teach computer classes locally. I also know little known secrets to making money online and SEO.

http://www.versitek.com

Experience

22 years of consecutive computer related jobs, hobbies and Military operations.

Education/Credentials
Personal experience, US Military Intelligence experience, Schooling and Signal Corp. Training as well.

Awards and Honors
Army accommodation medal and a two week advancement in A.I.T. training due to already existent computer knowledge at the time.

©2016 About.com. All rights reserved.