I’m a JavaScript newbie working on a website and I’ve run into an issue that’s beyond my ken to solve…
I made some picture links and have been researching the well-known image swap on mouseover JavaScript effect that can be found all over the web. I have some simple white image pics that I want to switch to blue when a user scrolls over them. I got bits of code from here and there and slowly pieced together a beginners understanding of the inner workings of what I’m trying to do. I threw together a quick sandbox html file with just the javascript code and you can see that here.
(Notice the script functioning without a problem)
Now when I migrated the working code into my homepage, everything seems alright except for ugly blue highlights that now appear around the links when the cursor is hovered over them
See here:
http://www.kendallfrancis.com/
I really want to fix this !
If you could help I’d be very, very grateful as most of my day has been spent in vain trying to figure this out – I need some expert perspective!
Here’s my (bloated) code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<title>Kendall Francis | Musician | Galactic Circus Diplodocus</title>
<meta content="Kendall Francis" name="author">
<meta content="Kendall Francis 1990-2011" name="copyright">
<meta content="all" name="robots">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css"><!-- @import "francis.css";--></style>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
var mus1 = new Image();
mus1.src = "images/music1.jpg";
var mus2 = new Image();
mus2.src = "images/music2.jpg";
}
function show_music() {
if (document.images) {
document["mus"].src = mus2.src;
}
}
function hide_music() {
if (document.images) {
document["mus"].src = mus1.src;
}
}
//-->
<!--
if (document.images) {
var pho1 = new Image();
pho1.src = "images/photo1.jpg";
var pho2 = new Image();
pho2.src = "images/photo2.jpg";
}
function show_photo() {
if (document.images) {
document["pho"].src = pho2.src;
}
}
function hide_photo() {
if (document.images) {
document["pho"].src = pho1.src;
}
}
//-->
<!--
if (document.images) {
var vid1 = new Image();
vid1.src = "images/video1.jpg";
var vid2 = new Image();
vid2.src = "images/video2.jpg";
}
function show_video() {
if (document.images) {
document["vid"].src = vid2.src;
}
}
function hide_video() {
if (document.images) {
document["vid"].src = vid1.src;
}
}
//-->
<!--
if (document.images) {
var who1 = new Image();
who1.src = "images/who1.jpg";
var who2 = new Image();
who2.src = "images/who2.jpg";
}
function show_who() {
if (document.images) {
document["who"].src = who2.src;
}
}
function hide_who() {
if (document.images) {
document["who"].src = who1.src;
}
}
//-->
</SCRIPT>
</head>
<body>
<div class="cenimg">
<img src="images/break.jpg" alt="kendallfrancis.com" title="Perpetual growth" width="424px" height="456px" class="imgcen"/>
</div>
<div>
<div align="center">
<a href="music.htm"
onMouseOver="show_music(); return true"
onMouseOut="hide_music()">
<IMG SRC="images/music1.jpg" ALT="Kendall's music" title="Kendall's music"
WIDTH="200" HEIGHT="40" name="mus" border=0></a>
<img src="images/duck.jpg" title="What the duck?" alt="What the duck?" width="45px" height="40px">
<a href="photo.htm"
onMouseOver="show_photo(); return true"
onMouseOut="hide_photo()">
<IMG SRC="images/photo1.jpg" ALT="Kendall's photos" title="Kendall's photos"
WIDTH="200" HEIGHT="40" name="pho" border=0></a>
<img src="images/duck.jpg" alt="What the duck?" title="quack!" width="45px" height="40px">
<a href="video.htm"
onMouseOver="show_video(); return true"
onMouseOut="hide_video()">
<IMG SRC="images/video1.jpg" ALT="Kendall's videos" title="Kendall's videos"
WIDTH="200" HEIGHT="40" name="vid" border=0></a>
<img src="images/duck.jpg" title="You're despicable!" alt="What the duck?" width="45px" height="40px">
<a href="who.htm"
onMouseOver="show_who(); return true"
onMouseOut="hide_who()">
<IMG SRC="images/who1.jpg" ALT="Who is this guy?" title="Who is this guy?"
WIDTH="200" HEIGHT="40" name="who" border=0></a>
</div>
</body>
</html>
Also, if you have any tips on how I can cut down on the amount of code (I read something about function with arguments, or something… but didn’t really understand it) er… yeah as you can tell I’m a real amateur…. But I’m real willing to learn if you’re willing to bear with me!
Oh, and I did search for this before hand — a lot — could not find anything applicable. But, my apologies if you know this has been answered before.
Those highlights are in the over-image themselves – the background is not totally black
Here is the shorter code