Java-Script, Icons not showing when loaded

**Ivo** · Jul 23 '05, 12:05 PM

Re: Java-Script, Icons not showing when loaded

"michael solis" wrote[color=blue]
> When I open a web page with the following script the "CLfolder.J PG" file
> is supposed to show. For some reason I only see the image place holder.
> How can I get the CLfolder.JPG to show after the page loads.
>
> <SCRIPT LANGUAGE="JavaS cript">
> function imgover(imgname ){imgname.src = "OPfolder.J PG"}
> function imgout(imgname) {imgname.src = "CLfolder.J PG"}
> </SCRIPT>
>
> <a href="Index.htm " STYLE="text-decoration: none"
> onMouseOver="im gover(pic1)" onMouseOut="img out(pic1)"><fon t face="MS
> Serif" Color="blue">HO ME</font></a>
>
> <a href="Contact.h tm" STYLE="text-decoration: none"
> onMouseOver="im gover(pic2)" onMouseOut="img out(pic2)"><fon t face="MS
> Serif" Color="blue">co ntact us</font></a>[/color]

You have two variables, pic1 and pic2, that need to correspond to two
images. If the images have something like
id="pic1", then all you need to do is substitute
imgover(pic1)
with
imgover(documen t.images['pic1'])

HTH
Ivo

**Grant Wagner** · Jul 23 '05, 12:06 PM

Re: Java-Script, Icons not showing when loaded

michael solis wrote:
[color=blue]
> When I open a web page with the following script the "CLfolder.J PG" file
> is supposed to show. For some reason I only see the image place holder.
> How can I get the CLfolder.JPG to show after the page loads.
>
> <SCRIPT LANGUAGE="JavaS cript">
> function imgover(imgname ){imgname.src = "OPfolder.J PG"}
> function imgout(imgname) {imgname.src = "CLfolder.J PG"}
> </SCRIPT>
>
> <a href="Index.htm " STYLE="text-decoration: none"
> onMouseOver="im gover(pic1)" onMouseOut="img out(pic1)"><fon t face="MS
> Serif" Color="blue">HO ME</font></a>
>
> <a href="Contact.h tm" STYLE="text-decoration: none"
> onMouseOver="im gover(pic2)" onMouseOut="img out(pic2)"><fon t face="MS
> Serif" Color="blue">co ntact us</font></a>
>
> -thanks
> Mike Solis[/color]

Why are you mixing CSS and <font> tags on the same page?

<a href="Index.htm "
style="text-decoration: none;font-family:MS Serif;color:Blu e;"
onmouseover="re turn imgover('pic1') "
onmouseout="ret urn imgout('pic1')" >HOME</a>

or

<style type="text/css">
a.myLinks {
text-decoration: none;
font-family: "MS Serif";
color: Blue;
}
</style>
....
<a href="Index.htm "
class="myLinks"
onmouseover="re turn imgover('pic1') "
onmouseout="ret urn imgout('pic1')" >HOME</a>

In the same code you provided, I see no tag that resembles:

<img src="..." name="pic1" ...> or <img src="..." name="pic2" ...>

which would be the least that is necessary to make your code function in
Internet Explorer. For a more general solution (give the <img> tags as
defined above) use:

<script type="text/javascript">
function imgover(imgname ) {
document.images[imgname].src = "OPfolder.J PG";
return true;
}
function imgout(imgname) {
document.images[imgname].src = "CLfolder.J PG";
return true;
}
</script>

Note that the file names are case-sensitve, and that they will need to
reside in the same directory from which the HTML file containing this
document loaded from in order to work. Also note that your function
indicates it's taking an image _name_, you seem to be passing it an image
reference. The code I've provided resolves this, by passing, and using, an
image name.

Lastly, keep in mind changing the behavior of links confuses users. See
<url: http://www.useit.com/alertbox/9605.html /> item #8. That's from 1996,
but it applies equally today as it did then. Also see <url:
http://www.useit.com/alertbox/20040510.html /> (which is up-to-date, making
the same recommendation not to change link color or behavior).

--
Grant Wagner <gwagner@agrico reunited.com>
comp.lang.javas cript FAQ - http://jibbering.com/faq

Java-Script, Icons not showing when loaded

Java-Script, Icons not showing when loaded

Comment

Comment