Pomoc przy zmienianiu obrazka w html i css

Dla specjalistów Webmastering
#1

Witam

Mam taki problem bo nie wiem jak to ustawić ,żeby zdjęcie jedno np: jak mam szare po najechaniu myszką zmieniło się na zielone , ale zdjęcie .

 

oto kod html

 

 <div class="text1">
                <img src="img/foto1.png" alt="foto1" class="text-img"/>
                <div class="text-top"><img src="img/bullet green.png"/>  Bezpieczeństwo</div>
                <div class="text-body"><p>Opieka merytoryczna na najwyższympoziomie, zabezpieczona, szyfrowana transmisja danych SSL, automatyczne kopie zapasowe.</p></div>
                <div class="text-bottom" href="text-bottom/czytaj dalej.html"><img src="img/button.png" alt="button"/></div>

 

 

a to kod css

 

.text1{
    float: left;
    width: 512px;
    min-height: 40px;
    margin-bottom: 55px;
}
 
.text-img{
    float: left;
}

.text-top{
    font-size: 20px;
    text-align:left;
    color: green ;
}


.text-body{
    text-align: left;
}

.text-bottom{
    text-align: right;
}
#2

Możesz użyć obrazka jako tło diva i za pomocą hover podmienić tło na zielone.

#3

tylko jak to zrobić ?próbowałem dużo razy ale coś mi nie wychodzi , bo chcem zrobić to do tego  jak mam takie dwa obrazki :

post-251281-0-80036600-1390073146_thumb.

post-251281-0-20598200-1390073147_thumb.

post-251281-0-24012100-1390073265_thumb.

#4

Wyrzucasz <img> z kodu HTML.

 

W CSS do .text-bottom { } dodajesz:

.text-bottom{
    text-align: right;
    background-image: url('img/button.png');
}

 

Analogicznie z .text-bottom:hover { }.

 

Z tym że to trochę nieeleganckie, lepiej by to na JS było zrobić. Jak? Google nie gryzie.

 

BTW, div z parametrem href w starszych przeglądarkach nie będzie klikalny. Bezpieczniej użyć starego dobrego tagu a.

#5

nie działa ;/

#6

“WZÓR”

 

css zamiast #fixed_bar .text1

#fixed_bar  a.mapa {
background: url('../images/fixed_bar_mapa.PNG');
width: 15px; height: 15px;
}
#fixed_bar  a:hover.mapa {
background: url('../images/fixed_bar_mapa_hover.PNG');

html w miejsce Twojego <img> wstaw <a>

<a class="mapa" href="javascript:void()" onClick="Funkcja_JavaScript();"></a>

lub 

<a class="mapa" href="link.html"></a>

no jeszcze dodaj koniecznie inline-block w css a

#fixed_bar  a {
    color: #FFF;
font: bold 15px/25px Tahoma, Geneva, Arial, Helvetica, sans-serif;
margin: 5px 5px 5px 0px;
display: inline-block;
}

 rzecz jasna pozmieniaj wymiar, zmień nazwe pliku i zadziała na 100%

#7

ej, nsapisałem coś takiego:

function zmienObrazek() {
				if(document.getElementById("obrazek").src == "img/button.png") {
					document.getElementById("obrazek").src = "img/buttongreen.png";
				} else {
					document.getElementById("obrazek").src = "img/button.png";
				}
			}

ale i tak nie działa. W html:

<img src="img/button.png" alt="button" id="obrazek" onclick="zmienObrazek()"/>
#8

@kpc21 css jest o wiele bardziej eleganckie niż js. Można podmienić grafikę img za pomocą css’a 

<img id="obrazek"  src="http://forum.dpcdn.pl/uploads/profile/photo-thumb-216052.png?_r=0" >

#obrazek{
  padding: 50px; 
  background-image:url('http://forum.dpcdn.pl/uploads/profile/photo-thumb-52462.jpg?_r=0'); 
  width:0px; 
  height: 0px;
}
#obrazek:hover{
  padding:0;
  width:100px;
  height:100px;
}

http://jsbin.com/udIsABA/1/watch?html,css,output

 

@up zaczynanie od ej jest niegrzeczne 

@autor, rozwiązanie kpc jest w twoim wypadku najbardziej optymalne (link do grafiki masz tylko 1, ty chcąc mieć 50 buttonów 50x powtarzałbyś img), mój kod to bardziej ciekawostka. JS olej puki ci nie potrzebny do czegoś czego się css nie da wykonać w ogóle.

#9

@drobok, świetne rozwiązanie, dzięki. Tylko mogłeś wspomnieć, że z tym paddingiem trzeba manipulować, względem szerokości i długości danego zdjęcia.

#10

A nie lepiej te grafiki przycisków zrobić w css’ie i dla hover zmieniać tło (stylujesz tag link z jakąś klasą i dajesz przy najechaniu zmianę koloru tła).

A jak już się upierać przy grafikach, to wziąć je połączyć w jedną (pionowo, jeden pod drugim, ot mini sprite tylko dla button’a ;)) i ustawić dla hover background-position, który będzie przerzucał na drugą część grafiki.

 

W obu przypadkach będzie mniej kombinowania…

 

PS. Wersja css przycisku (chyba tylko font się nie zgadza, nie wiem jakiego użyłeś, a szukał nie chce mi się ;))

#11

Mówiłem że jest to ciekawostka, taki patent działa jak przeglądarka nie obsługuje css :))