Grafik tauschen

Peter Klein · 23.03.06, 22:03

Hallo

Wie kann ich eine Grafik vor einem link so formatieren das sie die farbe wechselt beim Drüber fahren? Habe 2 gleiche Grafiken in verschiedenen farben.

Peter

**Maik** · 23.03.06, 22:06

Verwende die Grafiken als Hintergrundgrafiken für den Link und tausche sie über die Pseudoklasse :hover:

            
                    css Code: 
                  
                        a:link {
background: url(grafik1.jpg) no-repeat;
}
 
a:hover {
background: url(grafik2.jpg) no-repeat;
}

Peter Klein · 23.03.06, 22:17

Habe das so gemeint:

            
                    HTML-Code:
                  
                   	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>bit-welt.net....Webdesign | Digitale Bildbearbeitung | Design....Rheinland Pfalz 

</title>
<link rel="stylesheet" type="text/css" href="style_1.css"
</head>
<body>
<br />
<table>
<tr>
<td><img src="pfeil.gif"></td>
<td><a href="index.html">Testseite</a></td>
</tr>
</table>

</body>
</html>

CSS:

            
                    HTML-Code:
                  
                   	body {
	margin: 0;
	font-size: 0.7em;
}

a: {
	text-decoration: none;
	color: #000000;
}

a:link {
	text-decoration: none;
	color: #000000;
}

a:visited {
	text-decoration: none;
	
}

a:hover {
	
	text-decoration: none;
	color: #c1c1c1;
}
	
a:active {
	text-decoration: none;
}

#top_1 {
	
}

In der Zelle mit der Grafik soll diese sich ändern.

**Maik** · 23.03.06, 22:28

In diesem Fall ist Javascript erforderlich:

            
                    javascript Code: 
                  
                        // Image-Preloader
image1 = new Image();
image1.src = "pfeil_2.gif";
 
// swapImage
function swapImage(grafikname,grafiktausch)
{
document.images[grafikname].src=grafiktausch;
}

            
                    HTML-Code:
                  
                   	<table>
 <tr>
  <td><img src="pfeil.gif" name="start"></td>
  <td><a href="index.html" onmouseover="swapImage('start','pfeil_2.gif')" onmouseout="swapImage('start','pfeil.gif')">Testseite</a></td>
 </tr>
</table>

Der Thread wird ins JavaScript-Forum verschoben.

Peter Klein · 23.03.06, 22:34

Also habe ich ohne Java Script keine Chance?

**Maik** · 23.03.06, 22:36

In dieser Konstellation nicht.

Peter Klein · 23.03.06, 22:49

Hm..mist dachte ich mir schon...Na gut dank Dir.

Peter

Peter Klein · 23.03.06, 23:00

So, ist erledigt, habs dann doch mit ner Liste gemacht, erfüllt eigentlich den selben Zweck.

Möchte kein JS verwenden.

Peter

**Maik** · 24.03.06, 05:55

Also hast du auf meinen ersten Tipp mit der Hintergrundgrafik zurückgegriffen?

Gut, der Thread wandert (mit erweitertem Titel) wieder ins CSS-Board zurück