Я JavaScript новичок , работающий над веб-сайтом, и я столкнулся с проблемой, которую не могу решить ...
Я сделал несколько ссылок на изображения и былисследуем известный обмен изображениями при наведении мыши эффект JavaScript, который можно найти по всему Интернету.У меня есть несколько простых белых изображений, которые я хочу переключить на синий, когда пользователь прокручивает их.Я получил кусочки кода здесь и там и медленно собрал воедино начинающих, понимающих внутреннюю работу того, что я пытаюсь сделать.Я собрал быстрый песочница html файл только с кодом javascript, и вы можете увидеть, что здесь .
(обратите внимание, что скрипт работает без проблем)
Теперь, когда я перенес рабочий код на свою домашнюю страницу, все выглядит хорошо, за исключением уродливых синих бликов, которые теперь появляются вокруг ссылок, когда курсор над ними наведен
См. Здесь:
http://www.kendallfrancis.com/
Я действительно хочу это исправить!
Если бы вы могли помочь, я был бы очень, очень благодарен, так как большая часть моего дня была потрачена напрасно, пытаясь выяснить это -Мне нужна некоторая экспертная перспектива!
Вот мой (раздутый) код:
<!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>
Кроме того, если у вас есть какие-либо советы о том, как я могу сократить объем кода (я что-то читал)о функции с аргументами, или что-то ... но не совсем понял) э-э ... да, как вы можете сказать, я настоящий любитель .... Но я действительно хочу узнать, если вы готовытерпеть меня!
О, и я действительно искал этос рук - много - не смог найти ничего применимого.Но мои извинения, если вы знаете, что на этот вопрос уже отвечали.