Forum PHP.pl > [wolontariat]Zmiana obrazka po najechaniu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [wolontariat]Zmiana obrazka po najechaniu

Forum PHP.pl > Inne > Giełda ofert > Poszukuję

lazerdynamic

15.11.2009, 19:10:07

Jak zrobić, że jak najadę na obrazek to zmienia się na inny? Miałem to w JavaScipt ale jak najezdzam to sie laduje tak dziwnie, skacze obraz i dopiero po jakiś 5 sekundach jest normalnie. Jak zrobić to za pomocą CSS?

Spawnm

15.11.2009, 19:20:37

jeden większy obrazek jako tło i w css :hover -> zmiana położenia tła

lazerdynamic

15.11.2009, 19:21:36

Nie znam się na CSS w ogóle, tak więc prosiłbym o kod.

Spawnm

15.11.2009, 19:23:25

Więc przenoszę i dodaję tag

INProgress

15.11.2009, 20:10:39

Zakładam że obrazek główny i ten, który się ma zmienić mają taką samą wysokość w (X,Y) px. Po kolei proponuję Ci tak:
0. W pliku graficznym (jpg, png) ustawiasz 2 obrazki, jeden pod drugim, na górze ten, który ma być pierwszy.
1. W kodzie strony

[HTML] pobierz, plaintext 
<div id="obrazek"></div> 
[HTML] pobierz, plaintext

.
2. W css:
#obrazek {
background: url('sciezka_do_obrazka') top no-repeat; }

#obrazek:hover {
background-position: 0 -Ypx; }

,gdzie Y jest wysokością jednego obrazka.

Pisane z głowy, ale chyba tak to leciało z tego co pamiętam.

W razie czego -> GG: 12270063.

celbarowicz

15.11.2009, 20:23:11

U mnie nie skacze, może zbyt duże pliki?

[HTML] pobierz, plaintext 
js
<html>
<head>
<style type="text/css">
</style> 
<script language="javascript" type="text/javascript">
<!--  Hide
function obraz(zmien) { window.status=zmien ;
    if (zmien=="nowe")  {window.document.images.mojrysunek.src="kiecka.jpg";}
 
                                           else  {window.document.images.mojrysunek.src="droga.jpg";}                
   }
//-->
</script> 
</head>
<body >
<a href="" onmouseover="obraz('nowe') ;" onmouseout="obraz('stare') ;" ><img src="droga.jpg" name="mojrysunek" width="150"  height="200">
</a>
<br>
<br>
<a href="" ><p>celbarowicz</p>
</a>
</body>
</html>
 
 
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.