tutorials.de-Buchverschenkaktion 08/2010
Thema geschlossen
  1. 23.03.06 22:03 #1
    Benutzerbild von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin Peter Klein hat eine blütenweiße Weste
    Registriert seit
    Jun 2004
    Beiträge
    612
    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
    Benutzerbild von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin Peter Klein hat eine blütenweiße Weste
    Registriert seit
    Jun 2004
    Beiträge
    612
    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
    Benutzerbild von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin Peter Klein hat eine blütenweiße Weste
    Registriert seit
    Jun 2004
    Beiträge
    612
    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
    Benutzerbild von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin Peter Klein hat eine blütenweiße Weste
    Registriert seit
    Jun 2004
    Beiträge
    612
    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
    Benutzerbild von Peter Klein
    Peter Klein Peter Klein ist offline Mitglied Platin Peter Klein hat eine blütenweiße Weste
    Registriert seit
    Jun 2004
    Beiträge
    612
    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. Grafik über einer anderen Grafik mit sensitiven verweisen bewegen
    Von matthoz im Forum Javascript & Ajax
    Antworten: 12
    Letzter Beitrag: 20.06.06, 19:28
  2. Rechteckige Grafik Uploaden und rundeckige Grafik bekommen
    Von Callboy im Forum PHP
    Antworten: 4
    Letzter Beitrag: 02.12.04, 13:56
  3. Preloader! Ladebalken ist eine grafik < die grafik soll sich aufbauen hilfe?
    Von ChristianNierich im Forum Flash Plattform
    Antworten: 1
    Letzter Beitrag: 13.08.04, 23:04
  4. Grafik tauschen mit ImageReady
    Von tagra im Forum Photoshop
    Antworten: 5
    Letzter Beitrag: 10.02.04, 18:33
  5. Mainboard tauschen
    Von reinerxp im Forum Hardware
    Antworten: 2
    Letzter Beitrag: 30.08.03, 18:42

Lesezeichen

Lesezeichen