Verweis-sensitive Grafiken als Mouseovergrafik

[lealo]

Hallo Leute

Ich habe mithilfe von Selfhtml eine verweis-sensitive Grafik gebastelt:

<p>  
  <img src="Pharma2 - Copy.png" usemap="#Pharma2" name="PharmaLinks">  
  <map name="Pharma2">  
    <area shape="rect" coords="48,22,293,57"  
          href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\InventoryReportPharma.html" alt="InventoryReport" title="Inventory">  
    <area shape="rect" coords="48,62,293,96"  
          href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\BackupReportPharma.html" alt="BackupReport" title="Backup">  
    <area shape="rect" coords="48,105,293,132"  
          href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\IncidentReportPharma.html" alt="IncidentReport" title="Incident">  
    <area shape="rect" coords="48,141,293,173"  
          href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\AvailabilityReportPharma.html" alt="AvailabilityReport" title="Availability">  
  </map>  
</p>

Nun würde ich gerne dieses Bild mit den Hyperlinks als Mouseovergrafik benutzen. Das heisst ich hab ein Bild und wenn ich mit der Maus drüber fahre, dann kommt diese verweis-sensitive Grafik MIT Hyperlinks.

Kann mir da jemand weiterhelfen?

Liebe Grüsse
Lealo

[Malcolm Beck´s]

مرحبا

Statt p ein div zum gruppieren.

<div>  
  <img alt="hover mich" />  
    <p>  
      <img map />  
    </p>  
</div>

  
/* das CSS könnte dann in etwa so aussehen */  
div p {  
  display:none  
}  
div:hover p {  
  display:block  
}

mfg

[lealo]

Statt p ein div zum gruppieren.

Okay, also eigentlich weiss ich gar nicht, was das p bedeuten soll, ich habe einfach den Link aus Selfhtml kopiert und die Daten geändert...

<div>

<img alt="hover mich" />
    <p>
      <img map />
    </p>
</div>

Was müsste ich für "hover mich" schreiben? Also was bedeutet das? Als was erscheint das dann auf der Seite?  
  

> ~~~css
  

> /* das CSS könnte dann in etwa so aussehen */  
> div p {  
>   display:none  
> }  
> div:hover p {  
>   display:block  
> }

Eigentlich kann ich kein CSS sondern nur ein wenig HTML...

Könntest du mir konkret anhand meines Codes erklären, wie ich das zu machen habe?

Liebe Grüsse
Lealo

[Malcolm Beck´s]

مرحبا

Eigentlich kann ich kein CSS sondern nur ein wenig HTML...

http://community.de.selfhtml.org/my/zitatesammlung/zitat728

Könntest du mir konkret anhand meines Codes erklären, wie ich das zu machen habe?

Ok, aber ohne Image-Map.

<!-- Unser Grundgerüst -->  
<div id="imagemap_container">  
  <p>Dieser Text ist Sichtbar, könnte aber auch ein Bild sein.</p>  
    <div id="imagemap">  
      <!-- Hier kommt deine Image-Map rein -->  
      <p>Image-Map</p>  
    </div>  
</div><!-- HTML ends -->

Jetzt kannst du mit CSS ganz einfach alles gewünschte ein bzw. ausblenden.
Ein einfaches bsp.:

#imagemap_container { /* Der gesamte Container */  
  padding:10px;  
  border:1px solid #F00;  
}  
/*  
  Das div-Element, wo deine Image-Map drin ist, per default ausblenden  
*/  
#imagemap_container div { /* oder: #imagemap_container #imagemap */  
  display:none;  
  padding:10px;  
  width:300px;height:50px;border:1px solid #000; /* zu Testzwecken */  
}  
#imagemap_container:hover div { /* wenn man mit der Maus den Gesamten Container hovert, image-Map anzeigen */  
  display:block;  
}  

mfg

[lealo]

Okay. Vielen Dank. Mein Code sieht nun so aus, ist das korrekt?

  
<div id="imagemap_container">  
<p>  
<div id="imagemap">  
  	<img src="PharmaNeu2.png" usemap="#Pharma2" name="PharmaLinks" border="0">  
  	<map name="Pharma2">  
    		<area shape="rect" coords="34,13,279,40"  
          		href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\InventoryReportPharma.html"  
			alt="InventoryReport" title="Inventory">  
    		<area shape="rect" coords="34,54,279,78"  
          		href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\BackupReportPharma.html"  
			alt="BackupReport" title="Backup">  
    		<area shape="rect" coords="34,90,279,119"  
          		href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\IncidentReportPharma.html"  
			alt="IncidentReport" title="Incident">  
    		<area shape="rect" coords="34,131,279,159"  
          		href="\\phchbs-s3159.eu.novartis.net\straule1$\data\HTML\AvailabilityReportPharma.html"  
			alt="AvailabilityReport" title="Availability">  
  	</map>  
</p>  
</div>  
</div>  
#imagemap_container {  
	padding:10px;  
	border:1px solid #F00;  
}  
#imagemap_container div  
	display:none;  
	padding:10px;  
	width:300px;height:50px;border:1px solid #000;  
}  
#imagemap_container:hover div  
	display:block;  
}

Aber wenn ich dann die Internetansicht anschaue, dann sehe ich einfach mein Imagemap und darunter STEHT geschrieben der Rest. Muss ich nicht noch irgendetwas schreiben, damit mein HTML Editor merkt, dass das jetzt CSS ist und nicht mehr HTML??

Liebe Grüsse
Lealo

[JürgenB]

Hallo lealo,

0. Lerne die Basics.

1. Benutze den Validator

2. CSS-Angaben müssen in den Seitenkopf als "style" oder in eine css.Datei

3. Du hast einen Verschachtelungsfehler:

<div id="imagemap_container">
<p>
<div id="imagemap">
 ...
</p>
</div>
</div>

4. Ich vermute, dass das äußere div überflüssig ist.

Gruß, Jürgen

[Malcolm Beck´s]

مرحبا

Okay. Vielen Dank. Mein Code sieht nun so aus, ist das korrekt?

Nein. Grundsätzlich schliesse ich mich Jürgen an, Basics lernen. Da das aber dauert, und du vermutlich auch mal weiter kommen willst, hier noch eine kleine Starthilfe (wenn du die Basics beherrschst, kannst du sowas in unter 6 Minuten).

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>ÄÖÜ</title>  
<style>
~~~~~~css
  
/* Der gesamte Container */  
#imagemap_container {  
  padding:10px;  
  border:1px solid #F00;  
}  
/* Container mit der Image-Map */  
#imagemap_container div {  
  display:none;  
  padding:10px;  
  width:300px;  
  height:50px;  
  border:1px solid #000;  
}  
 /* wenn man mit der Maus den Gesamten Container hovert, image-Map anzeigen */  
#imagemap_container:hover div {  
  display:block;  
}
~~~~~~html
  
</style>  
</head>  
<body>  
  
<!-- Unser Grundgerüst -->  
<div id="imagemap_container">  
  <p>Dieser Text ist Sichtbar, könnte aber auch ein Bild sein.</p>  
    <div id="imagemap">  
      <!--  
          Hier kommt deine Image-Map rein  
       -->  
      <p>Image-Map</p>  
    </div>  
</div><!-- HTML ends -->  
  
</body>  
</html>

mfg