beatovich: Zwei Links/Ein Bild

Beitrag lesen

SELF-Forum

Zwei Links/Ein Bild

beatovich Homepage des Autors
– Informationen zu den Bewertungsregeln

hallo

Hallo zusammen,

wir müssen in der Schule gerade eine Webseite programmieren. Ich habe ein Bild und mein Ziel wäre es, dass wenn man auf die eine Hälfte vom Bild klickt, man auf eine andere Seite weitergeleitet wird, als wenn man auf die andere Hälfte klickt. Gibt es da eine Möglichkeit oder kann man nur ein Bild mit einem Link verbinden?

Es gibt mehrere Lösungsansätze.

<!DOCTYPE html>
<html lang="de">
<head>
<title>undefined</title>
<style>
.linkgroup { display:flex;flex-flow:row; }
.linkgroup a { 
	display:inline-block; width:4em; height:4em; 
	background-image:linear-gradient(90deg, black 4em, red 4em);
	background-size:8em 4em;
	background-repeat:no-repeat;
	color:transparent;
}
.linkgroup a:first-child {background-position: 0em 0; }
.linkgroup a:last-child {background-position: -4em 0; }
.linkgroup a:hover,
.linkgroup a:focus {color:blue;}
</style>
</head>
<body>
<h1>Beispiel</h1>
<p class="linkgroup">
	<a href="">Link 1</a>
	<a href="">Link 2</a>
</p>
</body>
</html>

Statt eines Bildes verwende ich hier einen linear-gradient

--
https://beat-stoecklin.ch/pub/index.html
Beitrag melden
–
Informationen zu den Bewertungsregeln