Text onmouseover to show image then remove

Larrywaz 1 3K Views

This piece of Java works perfectly so that onmouseover of the text an image is placed above the text, my problem is I can't come up with a piece of code for onmouseout to remove the image and restore the site to the way it was before the onmouseover.
Right now the image remains on the screen until a refresh of the page happens.
You can view the actual page operation at http://www.swiftboats.net/extras/boat_specifications.htm scroll down slightly to "Construction:"
There are seven different examples there in use, what I want to do is only have the highlighted pictures show while onmouseover occurs and disappear onmouseout.

LastMitch commented: Thanks for sharing! +12 
<script type="text/javascript">
    function show(Id) {
    document.getElementById(Id).style.display="inline";
    }
    </script>    
    <span onmouseover="show ('myImage1')">- <u>FORE PEAK (Peak Tank)</u></span></b>
    <img src="../images/MarkILineDrawingForePeak.jpg" id="myImage1" border="0" style="display:none;"
Member Avatar for LastMitch
LastMitch

There are seven different examples there in use, what I want to do is only have the highlighted pictures show while onmouseover occurs and disappear onmouseout.

@Larrywaz

That is very neat! Thanks for sharing! Thanks for the link and example. I find it very useful.

Member Avatar for almostbob
almostbob 866 Retired: passive income ROCKS

used to do precisely what you describe, highlight current items

<script type="text/javascript">
function show(Id){document.getElementById(Id).style.display="inline";}
function hide(Id){document.getElementById(Id).style.display="none";}
</script>

and the relevant html
<span onmouseover="show('myImage1')" onmouseout="hide('myImage1')">- <u>FORE PEAK (Peak Tank)</u></span>
or more permanent, to keep the image until another text is clicked
<span onfocus="show('myImage1')" onblur="hide('myImage1')">- click here <u>FORE PEAK (Peak Tank)</u></span>

Edited by almostbob
Member Avatar for almostbob
almostbob 866 Retired: passive income ROCKS

perhaps way off topic::\
there is also a delay in loading the images used, before the page is viewed by the user
the more images, the more detailed the images, the slower the page loads
preloading slows it down further
postloading, the page is loaded and the primary useful part (text) of the page is displayed, while the images download in the background\

=>given that tiny.gif is a 1x1 blank image

<!doctype>
<html>
<head>
bla bla blah
</head><body>
   bla bla blah
    <span onmouseover="show('myImage1')"; onmouseout="hide('myImage1')";>- <u>FORE PEAK (Peak Tank)</u></span></b>
<img src="../images/tiny.gif" id="myImage1" border="0" style="display:none;">
<span onmouseover="show('myImage2')"; onmouseout="hide('myImage2')";>- <u>not FORE PEAK (something else)</u></span></b>
<img src="../images/titiny.gif" id="myImage2" border="0" style="display:none;">
<span onmouseover="show('myImage3')"; onmouseout="hide('myImage3')";>- <u>not another FORE PEAK (something else)</u></span></b>
<img src="../images/titiny.gif" id="myImage3" border="0" style="display:none;">
<span onmouseover="show('myImage4)"; onmouseout="hide('myImage4')";>- <u>not another damn FORE PEAK (something else)</u></span></b>
<img src="../images/titiny.gif" id="myImage4" border="0" style="display:none;">

<span onmouseover="show('myImage5')"; onmouseout="hide('myImage5')";>- <u>tired of FORE PEAKs (something else)</u></span></b>
<img src="../images/titiny.gif" id="myImage5" border="0" style="display:none;">

blA BLA bladh

</body>
<SCRIPT type='text/JavaScript'>
<!--
document.getElementbyID("myImage1").src = '../images/MarkILineDrawingForePeak.jpg';
document.getElementbyID("myImage2").src = '../images/MarkILineDrawingNotForePeak.jpg';
document.getElementbyID("myImage3").src = '../images/MarkILineDrawingNotanotherForePeak.jpg';
document.getElementbyID("myImage4").src = '../images/something.jpg';
document.getElementbyID("myImage5").src = '../images/else.jpg';
// End --></script>
</html>

Vodka, sunshine, laptop, lovely wife, what a great afternoon, but check the code b4 using it, vodka does not a guru make

other things, creating a bunch of subdomain pointers to your own website sppeds up page load (spped=vodka)
if www.site.com www2.site.com pics.site.com all point to your public_html directory, you can optimize the http fetch
http will only download 2 files at a time fron each domain, to a maximum of 6 concurrent transfers from 3 domains
using three subdomain names, download six files at the same time, especially useful on fast services, not much difference on diallup,
www.site.com to be the href for your html css js files
and
www2.site.com & pics.site.com to be the href for images and media, you get a faster download than if everything was served from www.site.com

Edited by almostbob
Member Avatar for MidiMagic
MidiMagic 579 Nearly a Senior Poster

Ban mouseovers. They are not accessible. They cause problems with people who have dyslexia.

Member Avatar for almostbob
almostbob 866 Retired: passive income ROCKS

I thinmk the op is not using this like 4state css
the op seems to be a gallery function, changing an outsdide image relevant to the area of interest to confirm choice

Member Avatar for Troy III
Troy III 272 Posting Pro

Ban mouseovers. They are not accessible. They cause problems with people who have dyslexia.

what problems?
should we also ban the use of colors, because there are people with achromatopsia?!

Edited by Troy III
Member Avatar for Larrywaz
Larrywaz 12 Newbie Poster

Everyone is entitled to their opinion but onmouseover keeps the site clean of information not necessary to most views and only adds information when requested/necessary. The site stays smaller and easier to view to most of the people that access it.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview