area im div verlinken und mouseover färben
0 
Matthias Apsel
0 
Felix Riesterer
0 
MudGuard
0
area im div verlinken und mouseover färben
Guten Tag,
bin grad dabei bissel rum zu spielen und wollte in einem Viereck, das ich mit <div> erstellt habe einen Bereich, genauer gesagt eine Ecke, verlinken und sobald man mit dem Maus drüberfährt sollte es die Farbe wechseln. Derzeit sieht das ganze so aus:
<html>
<head>
<title>Idee2</title>
</head>
<body bgcolor="#000000">
<table align="center" border="0">
<tr>
<div align="center" style="background-color:#944545;width:300px;height:500px; padding:100px;">
<map>
<area shape="poly" coords="250,500,500,300,450,300" onmouseover="style='background-color:#808080;'" href="index.html" title="index">
</map>
<div align="center"style="background-color:#A2A2A2;width:80px;height:50px; padding:10px;">
<h1>Buchtitel</h1></div>
</div>
</tr>
</table>
</body>
</html>
Danke im voraus für die Hilfe =)
-
Om nah hoo pez nyeetz, modimidofrsaso!
Danke im voraus für die Hilfe =)
auch wenn es dir nicht gefallen wird:
Dein HTML ist grottig. Tabellenlayout, inline-css und veraltete Elemente gehören ins vergangene Jahrhundert.
Wie man es richtig macht, kannst du im Wiki erlernen.
Matthias
--
1/z ist kein Blatt Papier.
-
Lieber modimidofrsaso,
und wollte in einem Viereck,
also z.B. in einem <p>-Element
das ich mit <div> erstellt habe
obwohl ein <p> mehr Sinn transportiert hätte
einen Bereich, genauer gesagt eine Ecke, verlinken
wozu ein <a>-Element das sinnvollste aller möglichen gewesen wäre
und sobald man mit dem Maus drüberfährt sollte es die Farbe wechseln.
was mit CSS ein Kinderspiel gewesen wäre.
Derzeit sieht das ganze so aus:
...
<map>
<area shape="poly" coords="250,500,500,300,450,300" onmouseover="style='background-color:#808080;'" href="index.html" title="index">
</map>Warum einfach, wenn es auch maximalumständlich geht? Probiere es doch einmal so: ~~~html <html> <head> <title>Link-oben-rechts</title> <style type="text/css"> .box { width: 250px; height: 250px; padding: 0; background: yellow; border: 1px solid black; position: relative; } .box a, .box a:link { position: absolute; display: block; top: 0; right: 0; width: 25px; height: 25px; background: blue; text-align: center; } .box a:hover { background: red; } </style> </head> <body> <h1>Ein Quadrat mit Link oben rechts</h1> <p class="box"><a href="neue-seite.htm">X</a></p> <p>Die blaue rechte obere Ecke des gelben Quadrates sollte beim Überfahren der Maus rot werden.</p> </body> </html>Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi,
<area shape="poly" coords="250,500,500,300,450,300" onmouseover="style='background-color:#808080;'" href="index.html" title="index">
Warum einfach, wenn es auch maximalumständlich geht?
Vielleicht, weil der Link ein Dreieck sein soll, kein Rechteck?
Daß map/area nicht auf div angewandt werden kann, ist ja was anderes ...Mit CSS-Transformations könnte man den Link vielleicht sogar auf Dreieck-Form bringen (eventuell per skew, und ggf. dann noch per clip zurechtstutzen). Hab aber jetzt weder Zeit noch Nerven, das auszuprobieren.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Lieber MudGuard,
Vielleicht, weil der Link ein Dreieck sein soll, kein Rechteck?
die Koordinaten legen das nahe. Ob der OP aber wirklich unbedingt nur innerhalb dieses Dreiecks seine anklickbare Fläche haben will, oder ob es auch ein Rechteck mit dreieckigem grafischen Inhalt täte, bleibt unklar. Letzteres jedenfalls ließe sich wesentlich einfacher umsetzen.
Daß map/area nicht auf div angewandt werden kann, ist ja was anderes ...
Daran sieht man, dass der OP vielleicht nicht genügend in der Materie steckt, und meine obige Vermutung vielleicht tatsächlich stimmt. "Auf ein Dreieck klicken" geht auch in einer "rechteckigen Klickfläche".
Mit CSS-Transformations könnte man den Link vielleicht sogar auf Dreieck-Form bringen (eventuell per skew, und ggf. dann noch per clip zurechtstutzen). Hab aber jetzt weder Zeit noch Nerven, das auszuprobieren.
Ich vermute ganz stark, dass das auch nicht notwendig sein wird.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
-
-
Danke Felix, wenigstens einer der einen Lösungsansatz geben konnte. Natürlich habe ich keine Ahnung, deswegen habe ich auch "rum spielen" geschrieben. Eine Viereckige Linkfläche mit dreieckiger Grafik sollte es auch tun, werd ich mal ausprobieren.
gruß wochentage
-