Hallo liebes Forum,
ich bin neu hier, also verzeiht bitte, wenn ich ein Thema übersehen habe, welches meine Frage ggf. bereits beantwortet. Verschiebt diesen Thread ggf. gerne an die richtige Stelle.
Ich möchte ein Bild an bestimmten Stellen mit einer hover-Funktion versehen. Bei dem Mouseover soll sich zum einen der jew. definierte Bereich rot verfärben und außerdem soll darunter dann ein DropDown-Menü erscheinen, welches mir eine Handvoll Links anzeigt.
Ich habe mich für das Dropdown-Menü zunächst an diesem Beispiel von w3schools.com orientiert: http://www.w3schools.com/cssre…trycss_sel_hover_dropdown
Daraus habe ich dann folgende Seite erstellt:
<!DOCTYPE html>
<html>
<head>
<style>
div {background-color: none;
border: 1px solid;}
div a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 15px;
display:inline-block;}
ul {
display: inline;
margin: 0;
padding: 0;}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 400px;
display: none;}
ul li ul li {
background: #555;
display: block;}
ul li ul li a {display:block;}
ul li ul li:hover {background: #666;}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="#"><img src="http://www.hunde-fan.de/hundemarkt/wp-content/uploads/2016/03/Hunde-kaufen-verantwortung.jpg"></a>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Alles anzeigen
Das funktioniert soweit. Nur jetzt scheitere ich daran, eben nicht das ganze Bild den hover auslösen zu lassen, sondern eben álá image-map nur bestimmte Bereiche (die sich dann auch noch rot verfärben sollen).
In etwa so: Das Bild soll in 3 Teile unterteilt werden:
-> linker Teil des Bildes wird bei Mouseover halbtransparent rot (opacity: 0.5) und zeigt das DropDown-Menü mit Link 1, Link2, Link 3
-> mittlerer Teil des Bildes ... zeigt Link 4, 5 und 6
-> rechter Teil des Bildes ... zeigt Link 7, 8 und 9 an.
Ich dachte, ich könnte das als SVG lösen (http://wiki.selfhtml.org/wiki/…axis/responsive_Imagemaps ), bekomme aber keine sinnvolle Erweiterung meines Codes zustande. Kann mir jemand helfen?