Картинка, при наведении на которую, появляется другая картинка. |
|
Данные скрипты меняют одну картинку на другую при наведении курсорв мышки (надписи выделенные зеленым необходимо откорректировать).
|
Код. |
|
<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>
|
« предыдущая | содержание | следующая » |
