image maps mit Markierungen

R

Rodney

Mitglied
Hallo Leute,
ich hoffe ich bin hier im richtigen forum für meine Frage:
wie kann ich in html und javascript (wenns nicht anders geht auch php) folgendes realisieren:
Ich möchte sozusagen eine Bildnavigation (wie auf der alten Werner-Page) machen. Also man sieht am anfang der page ein großes bild das als Image map dient. Soweit würde ich das ja auch noch hinkriegen. Wie kann ich es aber realisieren das wenn der User mit der MAus über einen bestimmten Bereich ist dieser Bereich z.B. dick rot umrandet wird oder hervorgehoben wird

Vielen Dank im VOrraus RODNEY
 
ich würd das Bild zerschnippeln und von jeweils von jeder Einzelgrafik zwei Versionen...eine default-Version und eine mit Rand erstellen.....beim Überfahren dann das jeweilige Segment austauschen....
 
Die Einzelgrafiken sind ok, aber der Rahmen lässt sich mit CSS realisieren :rolleyes: :

<html>
<head>
<title>Meine Seite</title>

<style type="text/css">
a:hover {border: thin solid #FF0000;}
</style>

</head>

<body>
<!-- Hier deine Grafik --!>
<a href="image.html"><img src="img/visible.gif" border="0"></a>
</body>
</html>
 
Zuletzt bearbeitet:
Hi,

Der Rahmen mit CSS bringt dir nur was wenn deine "ausschnitte" Rechteckig sind - wenn du eine Kompliziertere Form (zB Landkarte) umranden willst, wirst du um Fatalus Methode nicht rum kommen...

ciao
 
ja die Auschnitte sind leider nicht rechteckig...
aber wenn man das bild in mehrere einzelauschnitte zerschnippelt dann wird das doch auch nicht mehr ganz nebeneinander angezeigt oder? also es soll ja wie ein großes bild aussehen...
 
Hallo,

doch das Funktioniert schon - hab dir ein Beispiel als ZIP angehangen - schaus einfach mal an (Du musst über das "T" fahren). Hier noch der Code (falls mal dannach gesucht wird).
Code: 
<html>
<head>
</head>
<body>
<map name="tutorials">
<area shape="poly" coords="30,77,45,37,14,37,25,4,129,4,119,37,90,37,72,77" href="http://www.tutorials.de/" 
 onMouseOver="document.T.src='3.jpg'" onMouseOut="document.T.src='1.jpg'">
</map>

<table cellspacing="0" cellpadding="0">
 <tr>
  <td><img src="0.jpg" border="0"></td>
  <td><img src="1.jpg" border="0" usemap="#tutorials" name="T"></td>
  <td><img src="2.jpg" border="0"></td>
 </tr>
</table>
</body>
</html>

ciao
 

Anhänge

Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück