04.01.2007, 12:24
Mouse over per CSS (Cascading Style Sheet) :
Funktionalität :
Der css code sagt den links wie sie sich zu verhalten haben. So ruft es als standart für einen a:link (Nicht aktiviert, noch nicht angeklickt) das Hintergrundbild :link.jpg auf und ersetzt es dann bei einem mousover durch das Bild hover.jpg. Wenn du es dann anklickst wird ein 3. HG Bild aufgerufen aktiv.jpg und wenn der link dann letztendlich als besucht gilt ein 4. HG Bild nämlich visit.jpg. (Für ein einfaches Mouseover also nur für den "standart" Effekt benötigst du lediglich den Teil mit hover und a link)
Ich kann nur raten so wenig wie möglich mit JS umzusetzen weil ich aus erfahrung weiß das viele Leute es bei ihrem Browser abschalten. Zum anderen ist die Seite mittels CSS erheblich schneller und wenn links auf die seite dazukommen wird das CSS automatisch sie mit dem jeweiligen HIntergrundbild versorgen.
LG
Kylee
Code:
a:link {
color: #F24F00;
font-weight: bold;
font-size: 12px;
border-style: outset;
width: 140px;
height: 40px;
border-color: Yellow;
font-family: "Comic Sans MS";
background-image: url(link.jpg);
}
/* noch nicht besuchte Seiten*/
a:visited {
color: #A52A2A;
font-weight: bold;
font-size: 12px;
border-style: outset;
width: 140px;
height: 40px;
border-color: Yellow;
font-family: "Comic Sans MS";
background-image: url(visit.jpg);
}
/* bereits besuchte Seiten*/
a:active {
color: Red;
font-weight: bold;
font-size: 12px;
text-align: right;
text-transform: uppercase;
border-style: inset;
width: 140px;
height: 40px;
border-color: #FFD700;
font-family: "Comic Sans MS";
background-image: url(aktiv.jpg);
}
/* gerade angeklickt*/
a:hover {
color: #FFA500;
font-weight: bold;
font-size: 12px;
border-style: outset;
width: 140px;
height: 40px;
border-color: Yellow;
font-family: "Comic Sans MS";
background-image: url(hover.jpg);
/*mouseover*/
}
Funktionalität :
Der css code sagt den links wie sie sich zu verhalten haben. So ruft es als standart für einen a:link (Nicht aktiviert, noch nicht angeklickt) das Hintergrundbild :link.jpg auf und ersetzt es dann bei einem mousover durch das Bild hover.jpg. Wenn du es dann anklickst wird ein 3. HG Bild aufgerufen aktiv.jpg und wenn der link dann letztendlich als besucht gilt ein 4. HG Bild nämlich visit.jpg. (Für ein einfaches Mouseover also nur für den "standart" Effekt benötigst du lediglich den Teil mit hover und a link)
Ich kann nur raten so wenig wie möglich mit JS umzusetzen weil ich aus erfahrung weiß das viele Leute es bei ihrem Browser abschalten. Zum anderen ist die Seite mittels CSS erheblich schneller und wenn links auf die seite dazukommen wird das CSS automatisch sie mit dem jeweiligen HIntergrundbild versorgen.
LG
Kylee