Bitte lesen brauche unbedingt Hilfe!! **Webdesign Hilfe**
#5
Mouse over per CSS (Cascading Style Sheet) :


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
Zitieren



Nachrichten in diesem Thema
Bitte lesen brauche unbedingt Hilfe!! **Webdesign Hilfe** - von Kylee - 04.01.2007, 12:24

Möglicherweise verwandte Themen...
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Suche Webdesign cathleen 1 1.400 09.02.2011, 14:56
Letzter Beitrag: Pywi
  Webdesign Himi 5 1.942 05.06.2010, 14:05
Letzter Beitrag: Tess
  Bitte herzlich um Eure Meinungen, Tipps, Kommentare, Verbesserungsvorschläge ... noeli-A-res 3 1.541 28.02.2010, 18:17
Letzter Beitrag: Elfenengel
  Origineles Webdesign Pedro 4 1.594 25.12.2009, 13:26
Letzter Beitrag: hsk
  Bitte Dringend Um Hilfe !!! lefty83 2 1.757 07.01.2008, 17:13
Letzter Beitrag: JU.MEDIA
  Braeuchte mal ein wenig hilfe! Serri 4 1.727 03.11.2007, 15:36
Letzter Beitrag: Serri
  Hilfe zum HP Erstellen Gravenhorst 18 4.932 04.07.2007, 11:55
Letzter Beitrag: Excali
  Eure Meinung bitte!!! Inkel25 0 1.189 15.03.2007, 14:27
Letzter Beitrag: Inkel25
  bitte nochmal kritik PI11_Fan 1 1.046 29.11.2006, 13:02
Letzter Beitrag: Carol
  Brauche mal Kritik PI11_Fan 4 1.122 22.11.2006, 18:11
Letzter Beitrag: PI11_Fan