Wenn Sie beispielsweise auf bestimmte Pixel in Bild 1 klicken, wird Bild 2 angezeigt. Nun, wie kann ich bestimmte Pixel in Bild 2 anklicken, um Bild 3 erscheinen zu lassen? Es scheint, ich kann nur eine Karte für Bilder haben, die bereits da sind ...Können Sie eine Imagemap in eine Imagemap einfügen? (JavaScript)?
Sie können eine Karte nicht in eine andere Karte einbetten, sie kann nur Bereich verwenden.
Sie können jedoch Links haben, um den Container durch eine andere Karte zu ersetzen, wenn Sie das suchen. Hier ist der aktualisierte Code, wobei der Schlüssel die Funktion ist, die die aktuelle Karte durch die nächste ersetzt:
document.getElementById ('topImageMap'). SetAttribute ("usemap", "Voreinstellungen");
Es wäre dann einfach, ein weiteres Element & Funktion hinzuzufügen, um Sie zurück zu der vorherigen oder 'Home' Karte zu bringen.
<!DOCTYPE html>
<html>
<body>
<img id="LivePreview"
src="http://i.imgur.com/p5LwjWA.png">
<br></br>
<img id="topImageMap"
src="http://i.imgur.com/vU7VZ4V.png" usemap="Patterns">
<img id="WhiteSpace"
src=http://i.imgur.com/jf7wt2j.png>
<map name="Patterns">
<area alt="PresetsButton" coords="18,21,94,80" onclick="changeContainer()" shape="rect" usemap="Presets"></area>
<area alt="RandomButton" coords="200,21,297,83" onclick="document.getElementById('WhiteSpace').src='http://i.imgur.com/Raypdtk.png'" shape="rect"></area>
</map>
<map name="Presets">
<area alt="PuffnairbeadButton" coords="58,26,153,95" onclick="document.getElementById('LivePreview').src='http://i.imgur.com/DjbAdnh.png'" shape="rect"></area>
</map>
<script>
function changeContainer(){
document.getElementById('topImageMap').setAttribute("usemap","Presets");
document.getElementById('topImageMap').src='http://i.imgur.com/wyQMR51.png'
}
</script>
</body>
</html>
Haben Sie Beispiel-Code zu zeigen, was Sie bereits versucht haben? –
Ja, es ist hier verlinkt: http://textuploader.com/53bpl –