Java-Script, Icons not showing when loaded

[michael solis]

When I open a web page with the following script the "CLfolder.JPG" 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="JavaScript">
function imgover(imgname){imgname.src = "OPfolder.JPG"}
function imgout(imgname){imgname.src = "CLfolder.JPG"}
</SCRIPT>

<a href="Index.htm" STYLE="text-decoration: none"
onMouseOver="imgover(pic1)" onMouseOut="imgout(pic1)"><font face="MS
Serif" Color="blue">HOME</font></a>

<a href="Contact.htm" STYLE="text-decoration: none"
onMouseOver="imgover(pic2)" onMouseOut="imgout(pic2)"><font face="MS
Serif" Color="blue">contact us</font></a>

-thanks
Mike Solis

*** Sent via Devdex http://www.devdex.com ***
Don't just participate in USENET...get rewarded for it!

 

[Ivo]

When I open a web page with the following script the "CLfolder.JPG" 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="JavaScript">
function imgover(imgname){imgname.src = "OPfolder.JPG"}
function imgout(imgname){imgname.src = "CLfolder.JPG"}
</SCRIPT>

<a href="Index.htm" STYLE="text-decoration: none"
onMouseOver="imgover(pic1)" onMouseOut="imgout(pic1)"><font face="MS
Serif" Color="blue">HOME</font></a>

<a href="Contact.htm" STYLE="text-decoration: none"
onMouseOver="imgover(pic2)" onMouseOut="imgout(pic2)"><font face="MS
Serif" Color="blue">contact us</font></a>

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(document.images['pic1'])

HTH
Ivo

 

[Grant Wagner]

When I open a web page with the following script the "CLfolder.JPG" 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="JavaScript">
function imgover(imgname){imgname.src = "OPfolder.JPG"}
function imgout(imgname){imgname.src = "CLfolder.JPG"}
</SCRIPT>

<a href="Index.htm" STYLE="text-decoration: none"
onMouseOver="imgover(pic1)" onMouseOut="imgout(pic1)"><font face="MS
Serif" Color="blue">HOME</font></a>

<a href="Contact.htm" STYLE="text-decoration: none"
onMouseOver="imgover(pic2)" onMouseOut="imgout(pic2)"><font face="MS
Serif" Color="blue">contact us</font></a>

-thanks
Mike Solis

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:Blue;"
onmouseover="return imgover('pic1')"
onmouseout="return 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="return imgover('pic1')"
onmouseout="return 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.JPG";
return true;
}
function imgout(imgname) {
document.images[imgname].src = "CLfolder.JPG";
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).