Смена картинок при наведении мыши

yojik · November 17, 2008

Скачал несколько скриптов по поиску "смена картинки при наведении мыши".

Все они не совсем то, что надо.

Они меняют либо ту картинку, на которую мышь наезжает, либо вот самое близкое:

предлагается несколько гиперссылок, в виде списка, где маркерами служат изображения-нолики, при наведении мыши на ссылку, маркер становится изображением-крестиком.

Мило, но надо малость другое:

есть окно изображения общей картинки, восемь гиперссылок и соответствующие этим ссылкам картинки (8) в папке,

надо, чтобы при наведении на некую ссылку в окне изображения общая картинка сменялась на соответствующую этой ссылке, а при уходе мыши со ссылки, общая картинка возвращалась.

Сделал на VB DHTML. Но не пойму, как это увязать с html-документом... Файлов насоздавалось: DCA, Dsr, dll, exp, lib, bas, не считая vbp и vbw..., да и сказали, что VB может быть и будет работать, но только в осле... мол масдайской продукт будет работать только в масдайском.

Помогите, пожалуйста. Может этот Java переделать или проще новый написать... Собственного Java-опыта нет совсем.

Edited November 17, 2008 by yojik

yojik · November 17, 2008

Нашёл вариант не с наведением, а с кликом по ссылке:

<script>
<!-- Защитили текст скрипта от старых браузеров
function l_image(a)
{
document.images[1].src=A
}
// -->
</SCRIPT>

<UL>
	<LI><A HREF="java script:l_image('w1.jpg')">welcome</A></LI>
	<LI><A HREF="java script:l_image('s1.jpg')">select</A></LI>
	<LI><A HREF="java script:l_image('r1.jpg')">reset</A></LI>
	<LI><A HREF="java script:l_image('h1.jpg')">hunter</A></LI>
	<LI><A HREF="java script:l_image('c1.jpg')">circle</A></LI>
	<LI><A HREF="java script:l_image('v1.jpg')">violet</A></LI>
	<LI><A HREF="java script:l_image('b1.jpg')">black</A></LI>
<IMG SRC="open.jpg" NAME="tool">
	</UL>

Не работает!

IE ругается:

"document.images.1" - есть null или не является объектом

Что это? Почему?

Victor Ananiev · November 17, 2008

ничего не понял, просто вот так:

<script>
function changePic(newAddr)
{
document.getElementById('mypic').src=newAddr;
}
function resetPic()
{
document.getElementById('mypic').src='img/default.jpg';
}
</script>

<a href="a.html" onmouseover="changePic('img/a2.jpg');" onmouseout="resetPic();">WWW</a>

mypic - id картинки которая меняется.

yojik · November 17, 2008

ничего не понял, просто вот так:
<script>
function changePic(newAddr)
{
document.getElementById('mypic').src=newAddr;
}
function resetPic()
{
document.getElementById('mypic').src='img/default.jpg';
}
</script>

<a href="a.html" onmouseover="changePic('img/a2.jpg');" onmouseout="resetPic();">WWW</a>
mypic - id картинки которая меняется.

СПАСИБО!!!

Victor Ananiev · November 17, 2008

))незачто)

Возможно это не самый оптимальный вариант, но... это вариант)

Edited November 17, 2008 by Vindex10

yojik · November 18, 2008

))незачто)
Возможно это не самый оптимальный вариант, но... это вариант)

Отлично работающий вариант!

Хошь упомяну в со-создателях?

Edited November 18, 2008 by yojik

Victor Ananiev · November 18, 2008

)) не надо) а то меня будут пинать за неправильно оформленный код, лучше останусь анонимным

Игорь Ермаков · November 18, 2008

я делаю это через macromedia dreamweawer там есть такая кнопочка

Victor Ananiev · November 18, 2008

хм, буду разбиратся))

Ogalig · November 19, 2008

А почему нельзя просто использовать ксс для этого? Намного кроссбраузернее получиться и будет работать даже если отключены скрипты у пользователя.

Victor Ananiev · November 19, 2008

не факт, для css нужно чтобы картинка была подэлементом того на который наводять, в даном случае вроде все сложней...если не ошибаюсь)

spdif · November 19, 2008

Как мне кажется логичней будет это сделать с помощью css

<style>
.but  { background: url(but.png); }
.but:hover { background: url(but_hvr.png); }
</style>

<body>
<ul>
	<li class="but"><a href="">welcome</a></li>
</ul>
</body>

Edited November 19, 2008 by spdif

Victor Ananiev · November 19, 2008

не пробовал в ИЕ смотреть? или ты хотел сказать .but A:hover ?

Edited November 19, 2008 by Vindex10

spdif · November 19, 2008

нет не пробовал, ибо IE rip

Ogalig · November 19, 2008

С hover проблема в 6 ие и ниже, но в сети много кряков для этого уже есть. Так что все же лучше в данном случае ксс, ИМХО .

chudo · December 20, 2011

Допустим ксс кроссбраузернее и быстрее, Но, чтобы сделат подмену картинок в ссылке, необходимо в ссылке писать текст, так как картинка идет фоном списка. А если слово не нужно? Просто картинка, тогда ксс не подойдет. Также, минусом является прогрузка изображения при наведении, первая картинка пропала, а вторая не успела прогрузиться (в случае если используется большое изображение).

В js можно поставить прелоадер изображений, то есть сразу прогружаются обе и при наведении идет только подмена.

Могу предложить решение - НО БЕЗ прелоадера.

function movepic (img_name,img_src) {

document [img_name].src=img_src;

}

</script>

Что писать в ссылке:

<a href="http://htmlbook.ru" onmouseover="movepic('название файла первого изображения','путь ко второму изображению'"

onmouseout="movepic('название файла первого изображения','путь к первому изображению')">

Как то так) Все работает

SelenIT · December 20, 2011

необходимо в ссылке писать текст, так как картинка идет фоном списка

Вовсе не обязательно.

Также, минусом является прогрузка изображения при наведении

Обходится применением спрайтов. А вот в случае JS — только отдельным прелоадером.

Vamp · May 10, 2012

Седня тоже парился с такой же проблемой вот содержимое двух файлов там под себя перепишешь папку с картинками создаш пути укажешьи все если что спрашивай подскожу

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" media="all" />
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#" class="about"><span>about</span></a></li>
		<li><a href="#" class="portfolio"><span>portfolio</span></a></li>
		<li><a href="#" class="blog"><span>blog</span></a></li>
		<li><a href="#" class="contact"><span>contact</span></a></li>	
</td>							
	</ul>
</div>
</body>
</html>

style.css

*{
	margin:0;
	padding:0;
}
body{
	background:#848484;
	color:#666;	
	font:0px/0px Tahoma, Arial, Helvetica, sans-serif;	
}
	#menu{
		width:1400px;
		background:url(images/menu_41_bg.jpg) no-repeat;
		height:40px;
	}
		#menu ul{
			list-style:none;
			text-align:center;
		}
			#menu li{
				list-style:none;
				display:block;
				float:center;
				padding:0px 115px 0px;
			}
				#menu li a{
					display:block;
					float:left;
				}
					#menu li a span{
						display:none;
					}
					#menu li a:hover{
						text-decoration:none;
					}
				#menu li a.about{
					background:url(images/about.png) no-repeat;
					width:190px;
					height:40px;
				}
					#menu li a:hover.about{
						background:url(images/about1.png) no-repeat;
					}
				#menu li a.portfolio{
					background:url(images/portfolio.png) no-repeat;
					width:166px;
					height:40px;
				}
					#menu li a:hover.portfolio{
						background:url(images/portfolio1.png) no-repeat;
					}
				#menu li a.blog{
					background:url(images/blog.png) no-repeat;
					width:104px;
					height:40px;
				}
					#menu li a:hover.blog{
						background:url(images/blog1.png) no-repeat;
					}
				#menu li a.contact{
					background:url(images/contact.png) no-repeat;
					width:639px;
					height:40px;
				}
					#menu li a:hover.contact{
						background:url(images/contact1.png) no-repeat;
					}

Sign In

Смена картинок при наведении мыши

Question

Link to comment

Share on other sites

17 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information