Witam wszystkich jestem tutaj nowy wiec proszę o trochę wyrozumiałości ; )
Mam pewien problem, którego nie mogę przeskoczyć, a mianowicie nie rozpisując się za specjalnie chciałbym uzyskać taki elekt jaki widać tu http://www.otto.de/Damen/Pullover/shop-de_bc_sh1458599 , chodzi mi o efekt z tymi kolorami.
Coś już tam naskrobałem i powiedzmy ze jest tak jak chciałem, tylko problem w tym ze jak dodaje kolejne zdjęcie z miniaturkami , zamieniają one zdjęcie tylko w jednym , działa to super ale tylko z jednym zdjęciem.
Moje pytania :
1.Czy da się jakoś przerobić skrypt tak by poniższe miniaturki odpowiadały tylko fotce powyżej ?
2 Czy po załadowaniu da się zdjęcie przekierować na jakiś adres ? Jest tak (<a href="java script:warp()">…

P.S Może ktoś zna inny skrypt by uzyskać taki efekt ?




oto skrypt który posiadam

[HTML] pobierz, plaintext 
W ramach HEAD
<script>
 
/*Rollover effect on different image script-
By Website Abstraction (http://wsabstract.com)
Over 200+ free scripts here!
*/
 
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}
 
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
 
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
 
preloadimages("../grafika/enter.gif","../grafika/pcq.gif","../grafika/gambler.gif")
</script>
 
W ramach BODY
<p><a href="MOJA_STRONA.pl " onMouseover="changeimage(myimages[0],this.href)"> <img src="../x/miniaturka.png "/></a> | 
<a href=" MOJA_STRONA1.pl " onMouseover="changeimage(myimages[1],this.href)"> <img src="../x/miniaturka1.png "/></a> | 
<a href=" MOJA_STRONA2.pl " onMouseover="changeimage(myimages[2],this.href)"> <img src="../x/miniaturka2.png "/></a></p>
 
<a href="java script:warp()"><img src="../grafika/enter.gif" name="targetimage" border=0></a>
 
<script>
 
//myimages[0] would refer to "enter.gif", myimages[1] would refer to "pcq.gif" etc
preloadimages("../grafika/enter.gif","../grafika/pcq.gif","../grafika/gambler.gif")
 
</script>
[HTML] pobierz, plaintext 

Skorzystaj z CSS sprites oraz pseudoklasy :hover.

Według mnie korzystając z samych CSS sprites oraz pseudoklasy ":hover" nie da rady uzyskać takiego efektu, jaki chce autor.
Dobrze by było jakbyś dokładniej wytłumaczył bo post jakoś chaotycznie napisany, albo to ja nieogarnięty jestem
Pierwszy błąd jaki widzę to nie używaj żadnego "preloadimages" tylko wpakuj grafikę 2 maluchów w jeden plik, jeden pod drugim i potem po najechaniu na przycisk jQuery (tak, proponuje jQuery, ułatwi wszystko) przesunie background o X px w dół i wyświetli się w pełni drugi maluch

zamiast sie pieprzyc zrob 2 obrazki : D
i zmieniaj tlo na mouseover

Dzięki wszystkim za zainteresowanie i odpowiedzi

chodzi mi o efekt dokładnie taki jak na tej stronie https://shop.otto.de/damenmode/kategorien/pullover/ przesuwając kursor na inne kolory ( kwadraciki ) fotka zmienia się
dodam ze nie jestem dość doświadczony w tej materii

klima06 uwierz mi dałoby się choćby: http://jsfiddle.net/NWhY6/ taki z głupa przykład

Witam wielkie dzięki za zaangażowanie i pomoc jestem już prawie u celu mojej misji
A wiec korzystając z pomocy użytkownika „ lobopol” zrobiłem prawie to co chciałem
Oto efekt http://jsfiddle.net/JJUf6
Zależałoby mi na tym by ikony znajdujące się powyżej były wyświetlane pod zdjęciem
Oraz by zdjęcie główne posiadało łącze do strony.
Wiem ze takie problemy dla niektórych mogą okazać się śmieszne ale sorry HELP !

http://jsfiddle.net/JJUf6/1/

Witam wielkie dzięki
Zależałoby mi jeszcze na tym by ikony znajdujące się powyżej były wyświetlane pod zdjęciem
Czy jest to możliwe do wykonania ?

Jasne pokombinuj z pozycjami, bardziej już gotowców mi się nie chce dawać

Jeszcze raz dziękuje za pomoc.

Irytuje tylko jedna sprawa której nie umie logicznie wyjaśnić, dlaczego jak zamieniam pozycje <a href="www.mojastrona.com" class="obrazek"></a> na górę. Niestety nie działa?
Zależy mi bardzo na takim wyglądzie : )
http://jsfiddle.net/QTsBc/

bo zapis .one ~ cośtam wpływa na elementy występujące za .one w kodzie html. Zmieniłeś kolejność elementów. Weź mój ostatni przykład i pozmieniaj tylko paddingi i position