Verweis-sensitive Grafiken als Mouseovergrafik

Lealo

Halli Hallo

Ich versuche mich gerade in HTML. Ich habe einen einfachen TextEditor und möchte folgendes:

Ich habe ein Bild und wenn ich mit der Maus darüber fahre, dann hätte ich gerne ein anderes Bild, dass eine verweis-sensitive Grafik ist. Diese Grafik habe ich schon erstellt. Probleme habe ich damit, diese Grafik als onMouseOver Bild zu definieren. Kann mir da jemand helfen?

Code

<IMG name="PharmaNeu" 
onMouseOver="PharmaNeu.src='PharmaNeu2.png'"
onMouseOut="PharmaNeu.src='PharmaNeu.png'"
src="PharmaNeu.png">

Das PharmaNeu ist das normale Bild und das PharmaNeu2 ist momenta einfach ein Bild, dass beim Mouseover erscheint und das durch die verweis-sensitive Grafik ersetzt werden sollte.

Code

<p>
  	<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>

Alles anzeigen

Bin froh um jede Hilfe!
Liebe Grüsse
Lealo

threadi

Meinst Du du möchstest das zweite Bild anstelle des ersten Bilds anzeigen? Und das zweite Bild soll ein ImageMap sein?

Dann reicht es ja fast schon so wie Du es aktuell hast. Schreibe einfach nur:

HTML

<img src="PharmaNeu.png" usemap="#Pharma2" name="PharmaLinks" border="0" onMouseOver="PharmaNeu.src='PharmaNeu2.png'" onMouseOut="PharmaNeu.src='PharmaNeu.png'">
  	<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>

Alles anzeigen

Dadurch ist das Bild zwar immer eine ImageMap, die kann aber sowieso nur genutzt werden wenn der Mauszeiger darüber ist. In dem Fall wird einfach ein anderes Bild angezeigt.

Hinweis: die Pfadangaben der Links sind sicherlich nur zum Testen oder ist das Absicht?

Lealo

Hallo threadi

Vielen Dank für deine Antwort. Okay, ja ich möchte PharmaNeu anzeigen und wenn ich mit der Maus darüber fahr möchte ich das Imagemap sehen. Momentan kommt einfach das PharmaNeu2, damit irgendwas kommt wenn ich mit der Maus drüber fahre.

Dein code funktioniert insofern, dass ich nun die Grafik PharmaNeu habe und wenn ich mit der Maus darüber fahr, dann könnte ich die Pfade der Imagemap anklicken. Aber leider sehe ich das Imagemap nicht. Ich kann nur blind klicken... Verstehst du, was ich meine?

Die Pfadangaben sind nur zum Testen, ja!

Liebe Grüsse
Lealo

Lealo

Also was mir auch noch aufgefallen ist, in deinem vorgeschalgenen Code kommt PharmaNeu2 vor. Aber ich möchte dieses Bild ja gar nicht, ich möchte die verweis-sensitive Grafik (okay die mache ich aus PharmaNeu2) als onMouseover Grafik....

threadi

Das ImageMap sieht man auch nicht. Es legt sich wie eine Folie über das Bild und man kann dann mit der Maus die markierten Bereiche anklicken. Wenn Du diese Bereich hervorheben willst, musst Du die Grafik entsprechend anpassen.

Tags