✔ <img> in <a> austauschen per css?

Status
Nicht offen für weitere Antworten.
K

Kopfballstar

Erfahrenes Mitglied
Hallo,

ich möchte folgendes. Es sieht so aus: <a href......><img src....></a>

Ich möchte nun das bei einem HOVER das Image ausgetauscht wird. Das ganze möchte ich mit CSS steuern. Leider finde ich nix passendes und hoffe ihr könnt mir weiterhelfen.
 
Hi Kopfballstar,

dazu bindest Du die Grafiken als Hintergrundbild im CSS ein...
Ansonsten müsstest Du auf Javascript zurückgreifen, was dumm wäre...

CSS: 
a:link, a:visited, a:active {
    background-color: #fff;
    background-image: url(pfad/zu/deinem_bild);
    background-repeat: repeat-x;
    background-position: left center;
}

a:hover {
    background-color: #fff;
    background-image: url(pfad/zu/deinem_zweiten_bild);
    background-repeat: repeat-x;
    background-position: left center;
}

Mehr Infos unter::: http://www.css4you.de/

Einen schönen Tag noch wünscht
coral
 
Zuletzt bearbeitet:
coral hat gesagt.:
Hi Kopfballstar,

dazu bindest Du die Grafiken als Hintergrundbild im CSS ein...
Ansonsten müsstest Du auf Javascript zurückgreifen, was dumm wäre...

css Code:
  1. a:link, a:visited, a:active {
  2. background-color: #fff;
  3. background-image: url(pfad/zu/deinem_bild);
  4. background-repeat: repeat-x;
  5. background-position: left center;
  6. }
  8. a:hover {
  9. background-color: #fff;
  10. background-image: url(pfad/zu/deinem_zweiten_bild);
  11. background-repeat: repeat-x;
  12. background-position: left center;
  13. }

Mehr Infos unter::: http://www.css4you.de/

Einen schönen Tag noch wünscht
coral
Zum Vergrößern anklicken....


Aber irgendwie funktioniert das nicht. Bei mir sieht es so aus:

Code: 
<div id='button_scroll_down'>
<a href="javascript:void('')" onmouseover="scrollitup()" onmouseout="clearTimeout(timer)"></a>
</div>

und im CSS

Code: 
#button_scroll_down	{position:absolute; left:236px; top:269px; width:14px; height:7px;}
#button_scroll_down	a:link, a:visited, a:active {background-image:url(buttons/down.jpg);}

Das image wird aber leider nicht angezeigt.
 
Hi Kopfballstar,

das kann so nicht klappen...
Bitte schau` Dir mal die Grundlagen des CSS auf oben genannter Website an...
Hier noch ein Komplett-Beispiel, aus dem Du lernen kannst:::

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<!-- Styles begin ::: Diesen Abschnitt zwischen die Tags <head> und </head> einfügen -->
<style type="text/css">
<!-- 
#menueback {
    width: 140px;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    padding: 10px;
    border-top: 1px solid #dddddd;
    border-right: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    border-left: 1px solid #dddddd;
    background-color: #FAFCFB;
}

#menueback ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

#menueback ul br {
    line-height: 5px;
}
#menueback li {
    margin: 0px;
    padding: 0px;
}

a:link.user, a:visited.user, a:active.user {
    display: block;
    font-family: 'verdana', verdana, arial, helvetica, sans-serif;
    font-size: 8pt;
    color: #333333;
    line-height: 9.6pt;
    text-align: left;
    letter-spacing: 0pt;
    text-decoration: none;
    vertical-align: baseline;
    
    background-color: #FAFCFB;
    background-image: url(images/weiss_01.png);
    background-repeat: repeat-x;
    background-position: left center;
    
    width: 118px;
    padding-top: 5px;
    padding-right: 3px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: 0px;
    
    border-top: 4px double #dddddd;
    border-right: 4px double #cccccc;
    border-bottom: 4px double #cccccc;
    border-left: 4px double #dddddd;
}

a:hover.user {
    display: block;
    font-family: 'verdana', verdana, arial, helvetica, sans-serif;
    font-size: 8pt;
    color: #000000;
    line-height: 9.6pt;
    text-align: left;
    letter-spacing: 0pt;
    text-decoration: none;
    vertical-align: baseline;
    
    background-color: #F6F8F7;
    background-image: url(images/blau_01.png);
    background-repeat: repeat-x;
    background-position: left center;
    
    width: 118px;
    padding-top: 5px;
    padding-right: 3px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: 0px;
    
    border-top: 4px double #cccccc;
    border-right: 4px double #dddddd;
    border-bottom: 4px double #dddddd;
    border-left: 4px double #cccccc;
}

/* mozilla hacks */
html>body #menueback li a { 
    display: block;
    width: auto;
}
-->
</style>
<style type="text/opera">
<!-- 
/* opera hack */
head:first-child+body #menueback li a {
    width: 118px;
}
head:first-child+body #menueback {
    width: auto;
}
-->
</style>
<!-- Styles end -->
</head>
<body style="background-Color: #ffffff;">
<!-- Menue begin ::: Diesen Abschnitt zwischen die Tags <body> und </body> einfügen -->
    <div id="menueback" align="center">
        <ul>
            <li><a class="user" href="http://">Linktext</a></li><br />
            <li><a class="user" href="http://">Linktext</a></li><br />
            <li><a class="user" href="http://">Linktext</a></li><br />
            <li><a class="user" href="http://">Linktext</a></li><br />
            <li><a class="user" href="http://">Linktext</a></li>
        </ul>
    </div>
<!-- Menue end -->
</body>
</html>
Einen schönen Tag noch wünscht
coral
 
Ich kann aber leider nicht sehen was ich bei mir falsch mache. Sorry, ich kann es wirklich nicht sehen. Erklär es mir bitte.
 
Hi Kopfballstar,

ich kann Dir hier leider keinen Schnellkurs in CSS geben (ich hab` auch noch `nen Job...)
Nur soviel::: Dein ganzer Ansatz ist meiner Meinung nach falsch...

Schau` Dir bitte einfach mal den folgenden Abschnitt bei SelfHTML an:::
http://aktuell.de.selfhtml.org/artikel/css/mouseover/index.htm#a4

Vergleiche mal die Codes und Du wirst selbst darauf kommen, was da falsch läuft...

Einen schönen Tag noch wünscht
coral
 
Sorry, ich kann einfach keinen Unterschied zwischen dem selfhtml Beispiel und meinem Code erkennen!

Bei mir sieht es jetzt so aus:

HTML: 
<div id='button_scroll_down'>
      <a id="down" href="javascript:void('')" onmouseover="scrollitup()" onmouseout="clearTimeout(timer)"}></a>
</div>

und im CSS

Code: 
#down{display:block;background-image:url(buttons/down.jpg);width:14px; height:7px;}	
#down:hover{display:block;background-image:url(buttons/down_pressed.jpg);width:14px; height:7px;}

Und ich kann nicht sehen was ich anders mache als in dem genannten Beispiel :(
 
So sollte die Hintergrundgrafik beim Überfahren mit der Maus getauscht werden:

Code: 
a#down:link, a#down:visited {
display:block;
background-image:url(buttons/down.jpg);
width:14px; 
height:7px;
}

a#down:hover {
background-image:url(buttons/down_pressed.jpg);
}
 
an Maik:::
Sorry, wenn ich da widerspreche, aber so klappt das nicht...
Wenn überhaupt, dann so::: a:hover#down {...}

an Kopfballstar:::
Gib` doch einmal die Position des Hintergrundbilds an, bzw. wie und ob es wiederholt werden soll...

CSS: 
#down{display:block;background-image:url(images/weiss_01.png);background-repeat: repeat-x;background-position: left center;width:14px; height:7px;}    
#down:hover{display:block;background-image:url(images/blau_01.png);background-repeat: repeat-x;background-position: left center;width:14px; height:7px;}



HTML: 
<div id='button_scroll_down'>  <a id="down" href="javascript:void('')" onmouseover="scrollitup()" onmouseout="clearTimeout(timer)"></a> </div>
Na, hast doch schon dazu gelernt... ;-)
In Deinem HTML-Code war übrigens auch eine Klammer zuviel...

Einen schönen Tag noch wünscht
coral
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück