|
Картинка, при наведении на которую, появляется другая
картинка.
Данные скрипты меняют одну картинку на другую при наведении
курсорв мышки (надписи выделенные зеленым
необходимо откорректировать).
Код.
<script language="JavaScript">
<!--
v=parseInt(navigator.appVersion.substring(0,1))
function load(location){
return image;
}
if (v>=3){
tr=new Image();
tr.src="image.gif";
}
function show(where){
if (v>=3){
stored=where;
storedLocation=document.images[where].src;
document.images[where].src="image1.gif";
}
}
function hide(){
if (v>=3)
document.images[stored].src=storedLocation;
}
//-->
</script>
В том месте, где необходимо в тег <a> вписывается: <a
href="index.htm"
onMouseOver="show('im1')"
onMouseOut="hide()">
<img src="image.gif"
name="im1" height=30
width=30 border=0></a>
Второй вариант (надписи выделенные
зеленым необходимо откорректировать).
Код.
<a href="index.htm" onMouseOver="document.myImage1.src='image1.gif'"
onMouseOut="document.myImage1.src='image.gif'">
<img src="image.gif" border=0 name="myImage1"
width=30 height=30 alt="">
</a>
Третий вариант служит для «подмены» нескольких разных
картинок (надписи выделенные зеленым
необходимо откорректировать).
Код.
<script language="JavaScript">
<!--
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);
version =
"old";
if (browserName == "Netscape" && browserVer >=3)
version = "new";
if (browserName == "Microsoft Internet
Explorer" && browserVer >=4)
version = "new";
if
(version == "new"){
toc1off = new Image(30,30);
toc1off.src = "image.gif";
toc1on = new Image(30, 30);
toc1on.src = "image1.gif";
toc2off = new Image(30, 30);
toc2off.src = "image.gif";
toc2on = new Image(30, 30);
toc2on.src = "image2.gif";
}
function img_act(imgName) {
if (version == "new") {
imgOn = eval(imgName + "on.src");
document [imgName].src
= imgOn;
}
}
function img_inact(imgName) {
if
(version == "new") {
imgOff = eval(imgName + "off.src");
document [imgName].src = imgOff;
}
}
//-->
</script>
В том месте, где необходимо в тег <a> вписывается: <a
href="index.htm"
onMouseover="img_act('toc1')"
onMouseout="img_inact('toc1')">
<img src="image.gif" name="toc1"
border=0 width=30 height=30
alt="">
</a>
<a href="index2.htm"
onMouseover="img_act('toc2')"
onMouseout="img_inact('toc2')">
<img src="image.gif" name="toc2"
border=0 width=30 height=30
alt="">
</a>
В
четвертом варианте подменяется картинка при наведении
курсора мышки на другую из двух картинок (надписи
выделенные зеленым необходимо
откорректировать).
Код.
<script language="JavaScript">
<!--
browser_name =
navigator.appName;
browser_version =
parseFloat(navigator.appVersion);
if (browser_name ==
"Netscape" && browser_version >= 3.0)
{ roll = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" &&
browser_version >= 3.0)
{ roll = 'true'; }
else { roll
= 'false'; }
function over(img,ref) { if (roll == 'true')
{
document.images[img].src = ref; } }
function
out(img,ref) { if (roll == 'true') {
document.images[img].src = ref; }
}
//-->
</script>
В том месте, где необходимо в тег <a> вписывается: <img
src="image1.gif" name="ks"
width=30 height=30
alt="">
<a href="index.htm"
onMouseOver="over('ks','image3.gif');"
onMouseOut="out('ks','image1.gif');">
<img src="image.gif" width=30
height=30 border=0 alt="">
</a>
<a href="index1.htm"
onMouseOver="over('ks','image.gif');"
onMouseOut="out('ks','image1.gif');">
<img src="image.gif" width=30
height=30 border=0 alt="">
</a>
Для
того чтобы подмена картинок происходила без задержек,
используют скрипт для предварительной загрузки изображений в
кэш (надписи выделенные зеленым
необходимо откорректировать).
Код.
<script language="JavaScript">
<!--
var browser = navigator.appName;
browser_version = parseFloat(navigator.appVersion);
var browser_ok = false;
if (browser == "Netscape" && browser_version >= 4.0)
browser_ok = 'true';
else if (browser == "Microsoft Internet Explorer" && browser_version >= 4.0)
browser_ok = 'true';
if (browser_ok == 'true') {
a1=new Image; a1.src="image.gif";
a2=new Image; a2.src="image1.gif";
a3=new Image; a3.src="image2.gif";
}
//-->
</script>
|
