Image Map mit Bilder-Popup

Mit Links lassen sich Bilder einblenden und mit Grafiken kann man Webseiten verlinken. Mit den sogenannten verweissensitiven Grafiken können auch unterschiedliche Teile eines Bildes zu unterschiedlichen Webseiten verlinkt werden. Auf dieser Demoseite habe diese Methoden miteinander kombiniert. Sobald man mit der Maus auf einen Fisch kommt wird ein Bild eingeblendet (bei einigen Fischen auch nur Text).

fisch a fisch b fisch c fisch d fisch ealle fische

Was benötigt man, um so eine Seite herzustellen?

Zunächst ein Programm, um den Code für die verweissensitive Grafik zu erstellen. Dazu kann man Frontpage verwenden oder das kostenlose FastImageMap. Im Notfall kann man es auch mit einem einfachen Editor machen, ist aber mühseelig.

Für das Einblenden der Grafiken/Texte habe ich die frei verfügbare JavaScript-Bibliothek overlib.js verwendet.

Mein Quellcode

Hier als Beispiel der Quellcode meiner Seite (muss natürlich angepasst werden):

<script language="JavaScript" src="https://file1.hpage.com/002351/24/html/overlib.js" type="text/javascript">
</script>
<script language="JavaScript">
ol_fgcolor="#cccccc";
ol_offsetx=75;
ol_offsety=1;
</script>
<map name="fische" id="fische">
<area shape="rect" coords="4,2,121,79" href="fisch_a.jpg" alt="fisch a" title="fisch a" onmouseover="return overlib('<img src=\'https://file1.hpage.com/002351/24/bilder/fisch_a.jpg\'');" onmouseout="nd();"/>
<area shape="rect" coords="2,80,125,144" href="fisch_b.jpg" alt="fisch b" title="fisch b" onmouseover="return overlib('<img src=\'https://file1.hpage.com/002351/24/bilder/fisch_b.jpg\'');" onmouseout="nd();"/>
<area shape="rect" coords="0,146,126,221" href="#1" alt="fisch c" title="fisch c" onmouseover="return overlib('<strong>Fisch1:</strong><br>will sich nicht fotografieren lassen');" onmouseout="nd();"/>
<area shape="rect" coords="133,3,260,83" href="#1" alt="fisch d" title="fisch d" onmouseover="return overlib('<strong>Fisch2:</strong><br>hat Hunger');" onmouseout="nd();"/>
<area shape="rect" coords="135,91,262,163" href="#1" alt="fisch e" title="fisch e" onmouseover="return overlib('<strong>Fisch3:</strong><br>liegt in der Bratpfanne');" onmouseout="nd();"/>
</map>
<img src="https://file1.hpage.com/002351/24/bilder/fische_02.png" width="270" height="228" border="0" alt="alle fische" title="alle fische" usemap="#fische" />

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Kategorie: alle Artikel (5) | Diese Website (5) | NPage (2) | Webdesign (2)

< 1 2 >

Tabellensortierung (16.01.2014 11:01:00)

Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Link zur aktiven Seite hervorheben (01.07.2013 12:53:00)

Auf vielen Websites wird der Link zur gerade aktiven seite hervorgehoben. NPage unterstützt so etwas leider nicht automatisch. Mein einem kleinen wenig javaScript kann man das aber nachbauen. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Inhalt unter der Menüleiste (07.06.2013 00:09:00)

Auch bei einer Npage Designvorlage ist es möglich, unter der Menüleiste noch zusätzlichen Inhalt unterzubringen. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 

< 1 2 >

Zum Seitenanfang