Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Image Map mit Popup

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

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="http://file1.npage.de/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=\'http://file1.npage.de/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=\'http://file1.npage.de/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="http://file1.npage.de/002351/24/bilder/fische_02.png" width="270" height="228" border="0" alt="alle fische" title="alle fische" usemap="#fische" />

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}

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

Galerie in News (16.07.2013 12:22:00)

Kann man eine NPage galerie in die News einfügen? Ja, man kann. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Neue CSS-Datei für Formularfelder (25.04.2013 07:49:00)

Vor kurzem habe ich festgestellt, dass es bei NPage eine neue CSS-Datei gibt, die automatisch in Webseiten eingebunden wird. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
{/if} Zum Seitenanfang
nPage.de-Seiten: Die Heidecker Rollergang | Formulierungshilfen Pflegeplanung