CSS Mouseover-Effekt mit Grafik

[dersauer]

Guten Tach,

ich habe mir einen code zusammengebastelt der auch funktioniert jedoch der Hyperlink nicht ;-)

Das habe ich in CSS eingefügt:

#ledbutton1
{
    width:332px;
    height:60px;
    top:40px;
    position:relative;
    float:left;
    display:block;
    margin-left:1px;
    background-image:url("http://www.seite.com/cms/tl_files/schahlLED_Theme/img/ledbereiche/ledbereiche_01.jpg");
}

#ledbutton1:hover
{
    background-image:url("http://www.seite.com/cms/tl_files/schahlLED_Theme/img/ledbereiche/ledbereiche_hover_01.jpg");
}

in der id-Attribute steht folgendes:

<div id="ledbutton1">
<a href="http://www.irgendwo.com">
</a>
</div>


Der Mousovereffekt geht, jedoch nicht der Link, ich denke mal wegen der ID, da der Link auf ledbutton1:hover liegen muss?

Ich finde den Fehler nicht, könnt ihr ihn sehen?

 

[fexx]

AW: CSS Mouseover-Effekt mit Grafik

Du kannst dir eigentlich den DIV sparen und die Styles direkt dem Link zuweisen. Im Moment ist es so, dass der Link quasi nicht vorhanden ist, da er keinen Inhalt hat und du Breite und Höhe dem DIV zuweist.

#ledbutton1 {     
     width:332px;     
     height:60px;     
     top:40px;     
     position:relative;    
     float:left;      
     [URL="http://www.psd-tutorials.de/forum/#"]display[IMG]http://images.intellitxt.com/ast/adTypes/mag-glass_10x10.gif[/IMG][/URL]:block;    
     margin-left:1px;     
     background-image:url("http://www.seite.com/cms/tl_files/schahlLED_Theme/img/ledbereiche/ledbereiche_01.jpg"); 
}
  
#ledbutton1:hover {    
     background-image:url("http://www.seite.com/cms/tl_files/schahlLED_Theme/img/ledbereiche/ledbereiche_hover_01.jpg");
}
 
<a id="ledbutton1" href="http://www.irgendwo.com"></a>

So sollte es funktionieren.

 

[browse]

AW: CSS Mouseover-Effekt mit Grafik

Um den Link innerhalb vom Div anzusprechen müsste im css hinter »#ledbutton1« einfach noch ein »a« stehen.
= »#ledbutton1 a« bzw. »#ledbutton1 a:hover«

 

[dersauer]

AW: CSS Mouseover-Effekt mit Grafik

FETTTTT geht danke huuuuuuuhuuuuu aber wieso geht das nicht mit DIV?

 

[dersauer]

AW: CSS Mouseover-Effekt mit Grafik

Ich verstehe da lag der fehler klar, --> a wird ja nicht mehr angesprochen, logisch

aber welche ist jetzt die "bessere" bzw. logischere varriante?

 

[fexx]

AW: CSS Mouseover-Effekt mit Grafik

aber welche ist jetzt die "bessere" bzw. logischere varriante?

Das kommt jetzt ganz auf das Layout an. Aber im Großteil der Fälle ist der DIV überflüssig. ;-)

 

[Myhar]

AW: CSS Mouseover-Effekt mit Grafik

Eigentlich kommt es hier nicht auf das Layout an. Es ist immer sinnvoller, semantisch korrektes Layout zu verwenden. Und wenn der Link gestyled werden soll, dann ist es auch sinnvoll, den Link direkt und nicht das umschließende div zu stylen.
Zusätzliche divs/spans braucht man zum Beispiel wenn man mehrere Grafiken für einen Linkbutton braucht, da man mit CSS2 nur einem Element eine Hintergrundgrafik zuweisen kann.

L. G.

 

[fexx]

AW: CSS Mouseover-Effekt mit Grafik

Eigentlich kommt es hier nicht auf das Layout an.

Zusätzliche divs/spans braucht man zum Beispiel wenn man mehrere Grafiken für einen Linkbutton braucht, da man mit CSS2 nur einem Element eine Hintergrundgrafik zuweisen kann.

So hatte ich es gemeint Danke!

 

[JannisL]

AW: CSS Mouseover-Effekt mit Grafik

Dein Link war im <a> </a>. Da stand aber nix, also kann man da nix anklicken. Würde man stattdessen sowas nehmen:

<a style="width:200px; height:200px; background-color:red;"></a>

Dann hätte der Link eine Breite und Höhe von 200px, die man anklicken kann. Mit man den auch sehen kann, habe ich ihn rot gefärbt.

Ich hoffe, du verstehst, was ich meine.