Imagemap und Rollover

Doro999 · 18.02.2009

Ich habe eine Grafik mit einigen Imagemaps. Nun wollte ich gerne, dass bei Rollover ein Rahmen um diese erscheint.
Eigentlich müsste doch das mit css machbar sein, oder? Ich habe mich schon dran versucht, hat aber leider nicht geklappt.

bigpaul · 18.02.2009

AW: Imagemap und Rollover

irgendwie weiss ich zwar grad nicht, was imagemaps sind, aber du kannst einer id mit css folgendes zuweisen:
#deineid {
/*irgendwelche eigenschaften*/
}
#deineid:hover {
/*irgendwelche hover eigenschaften*/
}

Chickenshooter · 19.02.2009

AW: Imagemap und Rollover

Moin,

das mit dem Mausover geht nicht in diesem Fall.

nimm am besten diese Grafik und "slice" diese mit PS.

dann erzeugt Dir PS eine Tabelle und in dieser kannst

Du dann mit CSS und dem :hover die einzelnen TD mit einer

Rahmenfarbe belegen.

MfG Chick

Doro999 · 19.02.2009

AW: Imagemap und Rollover

bigpaul schrieb:
irgendwie weiss ich zwar grad nicht, was imagemaps sind, ...

Imagemaps sind das gleiche wie Hotspots, wenn dir das was sagt

Chickenshooter schrieb:
Moin,
das mit dem Mausover geht nicht in diesem Fall.
nimm am besten diese Grafik und "slice" diese mit PS.
dann erzeugt Dir PS eine Tabelle und in dieser kannst
Du dann mit CSS und dem :hover die einzelnen TD mit einer
Rahmenfarbe belegen.
MfG Chick

vielen Dank, Ich dachte das kann man gut mit css lösen. Nun habe ich gelesen dass es für <area> gar keine css Eigenschaften gibt.

bigpaul · 19.02.2009

AW: Imagemap und Rollover

Ahh.. hab ich schonmal was von gehört. Aber du könntest doch einfach die Bilder über das Hintergrundbild legen und an die richtige Stelle positionieren und die dann mit nem hover versehen. Ich weiss jetz natürlich nicht, was du machen willst..

cebito · 20.02.2009

AW: Imagemap und Rollover

Doro999 schrieb:
Ich dachte das kann man gut mit css lösen. Nun habe ich gelesen dass es für <area> gar keine css Eigenschaften gibt.

Gibt es wohl nicht, aber weils mich nicht in Ruh gelassen, hab ich mal 'ne Pseudolösung gebastelt:

und

Noch ein bissl code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
#map {
position:relative;
}
#rahmen {
position:absolute;
top:102px;
left:118px;
width:35px;
height:35px;
visibility:hidden;
}
</style>
<script type="text/javascript">
<!--
function zeigeRahmen() {
document.getElementById("rahmen").style.visibility = "visible";
}
function verbergeRahmen() {
document.getElementById("rahmen").style.visibility = "hidden";
}
-->
</script>
</head>

<body>
<div id="map">
<img src="images/rot.jpg" border="0" usemap="#test"/>
<map name="test">
    <area shape="circle" coords="135,119,15" onmouseover=javascript:zeigeRahmen() alt=""></map>
<img src="images/blau.jpg" id="rahmen" border="0" usemap="#test2" />
<map name="test2">
    <area shape="circle" coords="17,17,15" onmouseout=javascript:verbergeRahmen() alt=""></map>
</div>
</body>
</html>

et voila

Doro999 · 21.02.2009

AW: Imagemap und Rollover

Mittlerweile hatte ich mir was anderes einfallen lassen. Da du dir aber so viel Mühe gemacht hast, habe ich den Code trotzdem mal getestet.
Es hat zwar lange gedauert, aber ich habe es hinbekommen. Allerdings hat es manchmal gehangen. vielen Dank