Witam,

mam do zrobienia coś na wzór slidera w postaci listy podzielonej na dwie części z prawej i lewej strony. Mianowicie po lewej być boxy na które się najedzie to po prawej ma zmieniać się obrazek. Nie mam pojęcia jak to zrobić.

Jakieś wskazówki?

http://api.jquery.com/hover/
http://api.jquery.com/html/

W czystym HTMLu nie uda się tego zrobić?


edit:

udało mi się zrobić aby obrazek się pojawił ale po zjechaniu z li usuwa całość... ale to nie było dobre rozwiązanie bo obrazek pojawiał się w li a potrzebuje w divie #image.

Udało mi się coś takiego stworzyć. Na jq się nie znam za bardzo i piszę kod na wyczucie, efektem jest że nie działa wcale.

[HTML] pobierz, plaintext 
 
<div id="navigate">
					<ul>
						<li><a id="special1" href="przetwory-owocowe,118.html"></a></li>
						<li><a id="special2" href="owoce-mrozone,119.html"></a></li>
						<li><a id="special3" href="produkty-przemyslowe-b2b,120.html"></a></li>
					</ul>
					<div id="image">
						{{if $aPage.iPage == 118}}
							<img src="templates/images/special_image1.png" />
						{{elseif $aPage.iPage == 119}}
							<img src="templates/images/special_image2.png" />
						{{elseif $aPage.iPage == 120}}
							<img src="templates/images/special_image3.png" />
						{{else}}
							<img src="templates/images/special_image.png" />
						{{/if}}
					</div>
				</div>
 
[HTML] pobierz, plaintext 

fragment jquery

[PHP] pobierz, plaintext 
 
$( "#special1" ).hover(
		$("#image").html("<img src='templates/images/special_image1.png' />")
	);
 
	$( "#special2" ).hover(
		$("#image").html("<img src='templates/images/special_image2.png' />")
	);
 
	$( "#special3" ).hover(
		$("#image").html("<img src='templates/images/special_image3.png' />")
	);
 
[PHP] pobierz, plaintext 

Nie działa jak powinno. gdzie jest błąd?

[JAVASCRIPT] pobierz, plaintext 
$( "#special1" ).hover(function(){
	$("#image").html("<img src='templates/images/special_image1.png' />")
});
[JAVASCRIPT] pobierz, plaintext 

Dzięki! Działa!