CSS Grafik als Link

Warchild

Hallo

Habe mal wieder eine echte n00b Frage:

Sagen wir zum beispiel ich habe eine Grafik mit einem Button mit Mouse Over Effekt definiert so wie hier:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>Mouse Over Test</title>
		<link rel="stylesheet" type="text/css" href="test.css"></link>
	</head>
	<body bgcolor="#000000" text="#ff0000">
		<div id="test">



[url='#'][/url]</p>
		</div>
	</body>
</html>

Alles anzeigen

und die CSS File:

Code

#test 
{
	display:block;
	background-image:url(out.gif);
    width:100px; height:100px 
    }
#test:hover 
{ 
	background-image:url(over.gif);
    }

Ich weiss wie ich einen Link in den Button setze, aber wie bekomme ich es hin das der button selbst der link ist den ich anklicke, also dass die grafik als link definiert ist?

mfg warchild

No0ob

Ich selbst realisier das eigentlich mit <td>.
Siehe, http://rageclan.org/duelcomp

phaziz

Code

[img]meinBilderButton.jpg[/img]

andere Möglichkeit per CSS:

Code

[b]Die Stylesheet-Anweisung:[/b]
.meinLink
{
height: 25px;
width: 200px;
background-iamge: url('meinButtonBild.jpg');
background-repeat: no-repeat;
border: 0px;
}


[b]Der eigentliche HTML-Link:[/b]


[url='Ziel.html'] [/url]

Alles anzeigen

hoffe das hilft dir.

Didi

Hi,

Code

<div id="blabla">
[url='blabla.html'][img]button.gif[/img][/url]
</div>

Das wäre die Variante mit nem Button ohne hover.
Willst du das ganze mit nem hover realisierst du das in deiner CSS Datei.

Code

#blabla a {background url(blabla.gif) no-repead center;}
#blabla a:hover {background url(blabla2.gif) no-repead center;}

Die Verlinkung dazu wäre dann.

Code

<div>
[url='irgendein.html'][/url]

Gruss Didi

CSS Grafik als Link

Tags

Benutzer online in diesem Thema