tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
8
ZUGRIFFE
1610
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 23.03.06 22:03 #1
    Avatar von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin
    Registriert seit
    Jun 2004
    Beiträge
    614
    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
     
    Brillen, Sonnenbrillen und Kontaktlinsen

    "Stimmt es, daß die Arbeit am Computer dumm macht?" - "Sie haben nichts zu befürchten. Computer können einen wahnsinnig machen, aber nicht dumm."
  2. 23.03.06 22:06 #2
    Maik Tutorials.de Gastzugang
    Verwende die Grafiken als Hintergrundgrafiken für den Link und tausche sie über die Pseudoklasse :hover:

    Code css:
    1
2
3
4
5
6
7

    a:link {
background: url(grafik1.jpg) no-repeat;
}
 
a:hover {
background: url(grafik2.jpg) no-repeat;
}
     
  3. 23.03.06 22:17 #3
    Avatar von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin
    Registriert seit
    Jun 2004
    Beiträge
    614
    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.
     
    Brillen, Sonnenbrillen und Kontaktlinsen

    "Stimmt es, daß die Arbeit am Computer dumm macht?" - "Sie haben nichts zu befürchten. Computer können einen wahnsinnig machen, aber nicht dumm."
  4. 23.03.06 22:28 #4
    Maik Tutorials.de Gastzugang
    In diesem Fall ist Javascript erforderlich:

    Code javascript:
    1
2
3
4
5
6
7
8
9

    // 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.
     
  5. 23.03.06 22:34 #5
    Avatar von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin
    Registriert seit
    Jun 2004
    Beiträge
    614
    Also habe ich ohne Java Script keine Chance?
     
    Brillen, Sonnenbrillen und Kontaktlinsen

    "Stimmt es, daß die Arbeit am Computer dumm macht?" - "Sie haben nichts zu befürchten. Computer können einen wahnsinnig machen, aber nicht dumm."
  6. 23.03.06 22:36 #6
    Maik Tutorials.de Gastzugang
    In dieser Konstellation nicht.
     
  7. 23.03.06 22:49 #7
    Avatar von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin
    Registriert seit
    Jun 2004
    Beiträge
    614
    Hm..mist dachte ich mir schon...Na gut dank Dir.

    Peter
     
    Brillen, Sonnenbrillen und Kontaktlinsen

    "Stimmt es, daß die Arbeit am Computer dumm macht?" - "Sie haben nichts zu befürchten. Computer können einen wahnsinnig machen, aber nicht dumm."
  8. 23.03.06 23:00 #8
    Avatar von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin
    Registriert seit
    Jun 2004
    Beiträge
    614
    So, ist erledigt, habs dann doch mit ner Liste gemacht, erfüllt eigentlich den selben Zweck.

    Möchte kein JS verwenden.

    Peter
    Geändert von Peter Klein (24.03.06 um 00:45 Uhr)
     
    Brillen, Sonnenbrillen und Kontaktlinsen

    "Stimmt es, daß die Arbeit am Computer dumm macht?" - "Sie haben nichts zu befürchten. Computer können einen wahnsinnig machen, aber nicht dumm."
  9. 24.03.06 05:55 #9
    Maik Tutorials.de Gastzugang
    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
     
« Layout ohne Tabelle möglich? | Bild vertikal und horizontal mittig ausrichten? »

Ähnliche Themen

  1. Mainboard tauschen
    Von Joerg66 im Forum Linux & Unix
    Antworten: 3
    Letzter Beitrag: 11.05.10, 13:20
  2. Quadrate tauschen
    Von zirag im Forum Flash Plattform
    Antworten: 7
    Letzter Beitrag: 16.03.07, 20:51
  3. Tasten tauschen per PHP
    Von speedyggg im Forum PHP
    Antworten: 3
    Letzter Beitrag: 07.10.05, 16:05
  4. Grafik tauschen mit ImageReady
    Von tagra im Forum Photoshop
    Antworten: 5
    Letzter Beitrag: 10.02.04, 18:33
  5. Bilder tauschen!
    Von Feldhofe im Forum Javascript & Ajax
    Antworten: 10
    Letzter Beitrag: 10.04.02, 22:32