Forum PHP.pl > [CSS][HTML]CSS HOVER IMAGE

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML]CSS HOVER IMAGE

Cocain3

31.08.2013, 15:40:00

Witam, mam problem ze zmianą obrazka po najechaniu myszy mój kod HTML wygląda tak:
Chyba nie ma różnicy czy obrazek jest PNG czy JPEG?
POMOCY

[HTML] pobierz, plaintext 
<html>
<head>
  <title>Szablon Allegro</title>
  <style type="text/css">
ofirmie {
    background-image: url('adres/obrazek.png');
    background-repeat: no-repeat;
    width: 200px;
    height: 150px;
    display: block;
}
ofirmie:hover {
    background-image: url('adres/obrazek_hover.png');
    background-repeat: no-repeat;
    width: 200px;
    height: 150px;
}
</style>
</head>
<body leftmargin="0" topmargin="0"
 style="background-color: rgb(255, 255, 255);" marginheight="0"
 marginwidth="0">
<!-- Save for Web Slices (Szablon Allegro KeyBlack.psd) -->
<table id="Tabela_01" border="0" cellpadding="0" cellspacing="0"
 height="2801" width="1200">
  <tbody>
    <tr>
      <td colspan="3"> <img style="width: 411px; height: 36px;"
 src="ADRES URL MOJEGO ZDJECIA"
 alt=""></td>
[HTML] pobierz, plaintext

I teraz tak jak mam dodać ten kod CSS co jest powyżej do tego obrazka aby zaczeło działać tak jak należy i nie robiło żadnych szkód w szablonie...
Proszę o pomoc.

lobopol

31.08.2013, 17:01:16

Co ty chcesz osiągnąć? Nie masz takiego taga "ofirmie" więc go nie ostylujesz, jakby to była klas ".ofirmie" bądź id "#ofirmie" mógłbyś coś działać. Ba w samym html nie masz niczego co się nazywa ofirmie.

Cocain3

31.08.2013, 17:38:40

Chcem osiągnać zmiane obrazka po najechaniu myszką

[HTML] pobierz, plaintext 
<html>
<head>
  <title>Szablon Allegro</title>
  <style type="text/css">
a {
    background-image: url('adres/obrazek.png');
    background-repeat: no-repeat;
    width: 200px;
    height: 150px;
    display: block;
}
a:hover {
    background-image: url('adres/obrazek_hover.png');
    background-repeat: no-repeat;
    width: 200px;
    height: 150px;
}
</style>
</head>
<body leftmargin="0" topmargin="0"
 style="background-color: rgb(255, 255, 255);" marginheight="0"
 marginwidth="0">
<!-- Save for Web Slices (Szablon Allegro KeyBlack.psd) -->
<table id="Tabela_01" border="0" cellpadding="0" cellspacing="0"
 height="2801" width="1200">
  <tbody>
    <tr>
      <td colspan="3"> <img style="width: 411px; height: 36px;"
 src="ADRES URL MOJEGO ZDJECIA"
 alt=""></td>
[HTML] pobierz, plaintext

Więc zmieniłem na ,,a" ale teraz powiedz jak zrobić aby to działało

valkirek

31.08.2013, 18:23:03

[HTML] pobierz, plaintext 
a.ofirmie {
...
}
 
a:hover.ofirmie {
...
}
<a class="ofirmie" href="#">...</a>
[HTML] pobierz, plaintext

[HTML] pobierz, plaintext 
img.ofirmie {
...
}
 
img:hover.ofirmie {
...
}
<img class="ofirmie" src="..."/>
[HTML] pobierz, plaintext

jesli chcesz hovera na sam obrazek bez linka to nie wiem czy we wszystkich przegladarkach to dziala

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.