Смяна на картинката при hover?

Ticketa

Ticketa

Registered
Как мога да направя, чрез CSS и JavaScript да се сменя hover-а на даден линк?

Тоест. Ако имам

<ul>
<li><a href="#"><img src="images/home.png" alt="" /> Начало</a></li>
</ul>

И като сложа мишката hover-а на снимката да се променя на home_hover.png ?

Не си падам по-обясненията, но се надявам да сте ме разбрали.

Даже, ако има по-добър вариант от моя т.е.
<a href="#">снимка НАЧАЛО</a>

Бих го използвал него. :)
 
Пробвай да го направиш така:

[css]
.someClass img a {........}
.someClass img a:hover {..........}
[/css]

По този начин да смени само картинката при hover, без текста.
 
Не става, направо ми чупи целия LI таг и background-а под текста.

HTML: 
<div id="nav-menu">
	<ul>
		<li><a href="#"><img src="images/home.png" alt="" /> Начало</a></li>
	</ul>
</div>

CSS
[css]#nav-menu {
width: 218px;
float: left;
font-size: 14px;
}
#nav-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav-menu li a {
background-image: url('images/menu.png');
height: 42px;
line-height: 42px;
float: left;
width: 95%;
display: block;
color: #353535;
text-decoration: none;
text-align: left;
padding-left: 8px;
border-top: 1px solid #fff;
}
#nav-menu li a:hover {
color: #f77e0b;
}
#nav-menu li a img {
display: inline-block;
float: left;
margin-top: 10px;
margin-right: 5px
}[/css]

5207.png
home
5208.png
home_hover
5209.png
menu

Иска ми се, да не пиша всеки път НОВ CSS ред, ами направо в самия HTML да му въведа снимката и там вече да си прави hover-а. Точно заради това си мислех, че трябва да се използва JavaScript.

Мислех си, ако се вземе елемента т.е. въвеждаме елемент:
<a href="#" backg='images/home.png' backg_hover='images/home_hover.png'>Начало</a>

И вече някакъв JavaScript , който променя CSS-а? Струва ми се, че е възможно, но нямам и идея как може да се направи.
 
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>
 
Може да ползваш горната идея,която е javascript И принципно е добра но цсс-а би свършил работа тъй като тва му е основната идея,точно.
Ако дадеш едно демо някъде мога да помогна по-добре (в код).
Иначе не виждам защо така се появява 2ра картинка.Може би е заради float на UL тагът...
:)
 
syneidesys каза:
<a href="TARGET URL GOES HERE"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>
Увеличете...

По този начин става, само когато съм с курсора (мишката) на снимката, но не и върху текста "Начало" например.

@ Hous, по-горе съм дал картинките + CSS :)

Но.. все пак аз съм човека който иска помощ и ти правя нещата в архив: link

Заповядай :)

ЕДИТ: и така пробвах но пак не ми върши работа: http://jsfiddle.net/8JCXD/13/ защото трябва да си върху снимката..

ЕДИТ 2: Трябва ми следното нещо: http://jsfiddle.net/7FGDv/22/

Обаче има ли възможност да се направи масива който е

HTML: 
var images = [
    "http://davidrhysthomas.co.uk/linked/astrid_avatar.png",
    "http://davidrhysthomas.co.uk/img/dexter.png"
    ];

Да се взима направо от a href или LI тага? :)
 
Освен за всяка картинка да сложиш клас тоес:
Код: 
<ul class="menu">
	<li class="home"><a href="#">Home</a></li>
	<li class="about"><a href="#">About</a></li>
	<li class="services"><a href="#">Services</a></li>
	<li class="contact"><a href="#">Contact</a></li>
</ul>

и после
Код: 
.home {background-image: url(images/1.gif);}
.home:hover {background-image: url(images/1_h.gif);}
.about {...}
.about:hover{...}
най-елементарно.Като за цветовете на текста примерно ще бъде
Код: 
home a{}
about a{} 
services a{}
и тн
 
Пренаписах си менюто на ново като стриктно следвах "правилата" за писане и го оправих - става и без javascript, въпреки че ми се вижда и безсмислено толкова css - но работи.

мерси все пак за идеите.
 
Тъй, като виждам че background на менюто ти е картинка-градиент, за да не ти чупи при случайно уголемяване на li-тата, а и за по-бързо зареждане на страницата е най добре да ползваш CSS background!

А можеш и да постигнеш първоначалната целта с доста малко код:
[css]#nav-menu li {
background: transparent url('5207.png') 5px center no-repeat;
overflow: hidden;
}

#nav-menu li:hover {
background-image: url('5208.png');
}[/css]

Градиента:
[css]background: #f1f1f1;
background: -moz-linear-gradient(top, #f1f1f1 0%, #e9e9e9 93%, #e8e8e8 98%, #dddddd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(93%,#e9e9e9), color-stop(98%,#e8e8e8), color-stop(100%,#dddddd));
background: -webkit-linear-gradient(top, #f1f1f1 0%,#e9e9e9 93%,#e8e8e8 98%,#dddddd 100%);
background: -o-linear-gradient(top, #f1f1f1 0%,#e9e9e9 93%,#e8e8e8 98%,#dddddd 100%);
background: -ms-linear-gradient(top, #f1f1f1 0%,#e9e9e9 93%,#e8e8e8 98%,#dddddd 100%);
background: linear-gradient(to bottom, #f1f1f1 0%,#e9e9e9 93%,#e8e8e8 98%,#dddddd 100%);
[/css]
 
Толкова писане за един бутон ....

Ето JS кода

[js]<script language="JavaScript1.4" type="text/javascript">

</script>

<script language="javascript" type="text/javascript">

</script>
[/js]

И html-a

HTML: 
<div id="rollimg1" style="position:absolute; overflow:hidden; left:427px; top:165px; width:64px; height:64px; z-index:0">
<a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('rollimg1','','file:///D:/ALL/From C Downloads/images (2).jpg',1)" href="#">
<img name="rollimg1" onLoad="MM_preloadImages('file:///D:/ALL/From C Downloads/images (2).jpg')" width=64 height=64 alt="Skayp buton zun zun" border=0 src="file:///D:/ALL/From C Downloads/picons07.png">
</a></div>

за няма и минута с Web page maker :)
 
GOTI каза:
Толкова писане за един бутон ....

за няма и минута с Web page maker :)
Увеличете...

Не че нещо, но тоя код е толкова зле, че по-зле не може и да стане. Толкова много код за такова дребно нещо ... :X:X

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

Back
Горе