Odsyłacz obrazkowy - zmiana koloru

Dla specjalistów Webmastering
#1

Mam dwa  identyczne obrazki z napisem: OFERTA, jeden jest napisany czcionką białą a drugi czerwoną, po najechaniu na biały ma się ukazać czerwony.  Jak tu teraz zapisać to w html 4.01 ?

#2

Zainteresuj się opcją :hover. Zrobisz to w css.

 

Skopiuj to c Ci napisałem do jakiego pliku np. test.html i zobacz czy Ci wyświetli. Najazd na tekst zmieni Ci kolor na czerwony. Według mnie wygląda to elegancko.

<!DOCTYPE html>
<html lang="pl">
<head>
 <title>test</title>                 
 <meta charset="utf-8" />
 <style>
  .top {
   width:600px;
   height:478px;
   margin: 0 auto;
   position:relative;
   background-color:#000;
   }
  img {
   width: 100%;
   height:100%;
   opacity:0.9; // sterowanie przeźroczystością 0-1
   transition: all 0.4s ease-in;
   }
  .empty {
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.5); // sterowanie przeźroczystością warstwy
  }
  .top a {
   position: absolute;
   top: 45%;
   width: 100%;
   text-align: center;
   color: white;
   font-size: 60px;
   font-weight: normal;
   font-family: Verdana, sans-serif;
   transition: all 0.5s ease-in;
   display: block;
   text-decoration: none;
  }
  .top a:hover {
   color: red;
  }
 </style> 
</head>
 <body>
  <div class="top">
   <img src="http://cdn.homedit.com/wp-content/uploads/2012/01/blue-living-room-design-ideas4.jpg" alt="jakiś obraz z opacity 0.5">
   
   <div class="empty"></div>
   
   <a href="#">Oferta</a>
   
   </div>
  </div>
 </body>
</html>
#3

Grafika a tekst to co innego, narzucanie zbędnego kodu tylko zaciemnia

<a href='adres'><img src='sciezka_do_obrazka_1.rozszerzenie' id='im'></>

Możesz użyć css:

#im:hover{
  background-image: url(sciezka_do_obrazka_2.rozszerzenie);
}

lub jquery:

$('#im').hover(function () {
        this.src = 'sciezka1 (jak w css)';
    }, function () {
        this.src = 'sciezka2 (jak w css)';
    });

lub js:

<a href="adres" onMouseOver="document.im.src='sciezka1';" onMouseOut="document.im.src='sciezka2';">
  <img src="sciezka1" name="im">
</a>
#4

No to jeszcze wersja z css’em, najbardziej kompaktowa do tego jednego guzika.

Podstawą jest jedna grafika z oboma stanami przycisku (zwie się to “sprite”). Stan wyjściowy umieszczasz na górze, stan hover (po najechaniu kursorem) bezpośrednio na dole, czego wynikiem będzie tego typu grafika.

Potem już pozostaje odpowiednie ubranie tego w css, w sposób przedstawiony poniżej:

http://codepen.io/anon/pen/aOZQEe

#5

Zawsze ja wstwiam temat to czekając na odp. kombinuję dalej i mnie oświeca i w tym wypadku mnie oświeciło, ale częściowo, tzn. mam 5 podstron i 4 z nich zrobiłem tak jak chciałem, ale ta 5 bez zmian.

Teraz wstawiam pliki o.html czyli oferta w której mi nic nie działa mimo kopiowania z podstron, które mi działają i f.html czyli foto , które mi działa.

o.html

 

f.html

 

Oczywiście chodzi tu tylko o menu, które mi nie zmienia koloru w podstronie oferta. Edycja odbywa się w programie Nvu.

 

Dodam jeszcze plik dokumentu main.css

Jest jeszcze coś takiego co też nie działa tylko w podstronie oferta , a mianowicie po najechaniu myszką na menu jakiejś tam podstrony nie pojawia sie tekst alternatywny.

Natomiast odsyłacze tekstowe na podstronie oferta zmieniają kolory.