Смяна на картинка от линк

A

Avidea

Registered
Как да направя когато се сменя роловър линк да сме сменя и определена роловър катинка?
 
Ще ти цитирам един урок. Ти кажи дали нещо подобно ти трябва?

Смяна при минаване с мишката върху бутон, като се използва само една картинка и CSS. Една картинка се използва за да не се получава глупаво забавяне при преминаване с мишката, както често пъти сме виждали.

За да направите подобно РолOувър бързо меню ви е небходима картинка. За целите на сегашното упражнение направих с Gimp тази картинка:

onmouse.png


Ще използваме слой (<div>) за да имаме пълна свобода върху разположението на менюто спрямо страницата. И така да видим първо как ще изглежда HTML кода:

Код: 
<div id="menu">        
	<a href="">.</a>        
	<a href="">.</a>        
	<a href="">.</a>        
	<a href="">.</a>        
	<a href="">.</a>        
</div>

Мдам, а защо ли поставих точка... това е елементарен хак за Firefox, за да има сходимост в случай, че някой си помисли да отвори страницата с Internet Explorer (вероятно има още хора които ползват тази порта за експлойти и вируси).
Да видим и как би изглеждал CSS кода:


Код: 
body { background: #000000;color: white; }        
        
#menu {        
width:100px;        
border-bottom: 1px solid silver;        
border-right: 1px solid silver;        
}        
        
#menu a {        
	display:block;        
	color: black;        
	width:76px;        
	background: url("onmouse.png") 0 0 no-repeat;        
	}        
#menu a:hover {        
	background-position: -60px 0;        
	}

Не е особено много код, нали?! Но пък за сметка на това всички посещаващи страничката ви няма да има нужда да си пускат JScript защото не използваме "onmouseover". Така страницата ще бъде видима нормално и от доста браузри без вграден JScript и ще е по всички стандарти.
Ето и самият пример:
http://web-tourist.net/project/phrozencrew/onmouse.html
 
тва за банер ли ти трябва? Иска6 секи банер да е с разли4ен линк така ли ?>
 
PhrozenCrew, не е това, но все пак урока е интересен и ще ми е полезен.
Имах нещо друго предвид: имам роловър картинка която ми служи за линк и отдолу описание на картинката което също е роловър и води до същия линк като картинката, но когато сложа мишката върху описанието само то си променя цвета, а аз искам и картинката също да се сменя и обратното. Опитах да ги маркирам и двете и така да им дам да се линкват заедно къъм един URL, но тогава и картинката се подчертта и седи мн грозно. Сигурно е нещо мн лесно, ама аз съм мн зле с термините в HTML и ми е трудно да обясня.
 
<script language="JavaScript1.4" type="text/javascript">

</script>

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

</script>

<body>

<div id="nav1" style="position:absolute; left:60px; top:226px; z-index:0"><a onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nav10','',КАРТИНКА1',1)" href="URL"><img name="nav10" onLoad="MM_preloadImages('КАРТИНКА1')" alt="" border=0 src="КАРТИНКА2"></a></div>
Пробвай така :)
 
Avidea, само не използвай тоя накраден код от MacroMedia - "MM_"-функциите, аман от крадене!
От толкова много JScript почва да ми се повръща. Но така се случва когато човек не мисли. Кофти е да не мислиш и ето и резултата по горе :). Да ме извинява SuCcEsS, обаче баба Парашкева и сопол не би си хвърлила по тоя код :).

Предлагам ти едно доста по-елегантно и разбираемо решение, базирано на CSS. Можеш да видиш кода и демото тук:
http://instr.hit.bg/mouse_over/mouse_over.html
Успех, приятелю и ако имаш още въпроси питай!
 
Мерси PhrozenCrew, с горния код нещо не ми се получи. Май това е точно това което търся, ще го пробвам по-късно тая вечер
 
Да те питам още нещо - в кода има тагове <h1> <h2>. Къде мога да намеря повече информация как точно се ползват, защото не съм наясно, а знам че имат значение в оптимизацията на сайта.
 
доколото разбрах искаш да напраиш нещо такова
http://ajax-bg.com/team.php
може да видиш кода как точно е направено и конкретно класът #team
 
mute, Бутоните са абсолютно същите каквито бях змислил да сложа, само че на мен нещо не ми се получават (ползвам HTML и не разбирам почти нищо от php). По принцип най-лесно се сещам да направя катинката и текста като един линк и на картинката да напиша да не е подчерата. Как обаче се правише това?
 
Бутоните които се използват в сайта който mute е дал са направени на флаш...
 
Avidea каза:
... По принцип най-лесно се сещам да направя катинката и текста като един линк и на картинката да напиша да не е подчерата. Как обаче се правише това?
Увеличете...

Може да пробваш така:

Между <style type="text/css"> и </style> добави следния код:

Код: 
.button {
	background-image:url(papkata/button.gif);
	text-decoration: none;
	color: #000000;
}

.button:hover {
	background-image:url(papkata/button_hover.gif);
	text-decoration: none;
	color: #000000;
}

Ето и как да изведеш бутоните:

Код: 
<a href="http://tvoq_sait.com/" class="button">Името На Бутона</a>
 
Оправих се с бутоните, но сега имам сходен проблем и затова реших да продължа темата. Как да направя така че картинките да ми се зареждат в таблици. По-точно всичко това трябва да бъде в таблица с две колони в първата да са линковете, а в другата да се зареждат картинките.

Код: 
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<style type="text/css">
.gallerycontainer{
position: relative;
}

.thumbnail:hover{
background-color: white;
}

.thumbnail span{
position: absolute;
background-color: white;
padding: 0px;
left: -1000px;
border: 0px dashed gray;
visibility: hidden;
color: white;
text-decoration: none;
font-size: 50px;
}

.thumbnail span img{
border-width: 0;
padding: 0px;
}

.thumbnail:hover span{
visibility: visible; 
top: 0;
left: 230px;
z-index: 50;

}
.thumbnail:link, .thumbnail:visited {color: #2E557B; text-decoration: none; font-family: Tahoma; font-size: 16px;}
.thumbnail:hover {color: #666666; text-decoration: underline; font-family: Tahoma; font-size: 16px;}

</style>
</head>

<body>
<div>
<a class="thumbnail" href="#thumb"><strong>Видеонаблюдение</strong><span><img src="gif/main1.gif" /><br />Видеонаблюдение</span></a>
<br />
<a class="thumbnail" href="#thumb"><strong>Пожароизвестяване</strong><span><img src="gif/main2.gif" /><br />Пожароизвестяване</span></a>
<br />
<a class="thumbnail" href="#thumb"><strong>Домофонни системи</strong><span><img src="gif/main3.gif" /><br />Домофонни системи</span></a>
<br />
<a class="thumbnail" href="#thumb"><strong>Хотелски решения</strong><span><img src="gif/main4.gif" /><br />Хотелски решения</span></a>
<br />
<a class="thumbnail" href="#thumb"><strong>Алармени системи</strong><span><img src="gif/main5.gif" /><br />Алармени системи</span></a>
<br />
<a class="thumbnail" href="#thumb"><strong>Контрол на достъпа</strong><span><img src="gif/main6.gif" /><br />Контрол на достъпа</span></a>
</div>

<body>
</html>
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе