✔ Responsive Image Maps jQuery Plugin

A

Alori

Grünschnabel
Hallo zusammen!

Ich habe für eine Website eine Image Map gemacht, weil ich aus einem großen Bild bestimmte Bereiche verlinken will (zu unterschiedlichen Zielen).

Leider kann man bei Image Maps ja nur mit festen Pixelwerten arbeiten (weil die Browser noch keine % - Angaben für die area coords akzeptieren -.-) und weil das Bild je nach Bildschirmauflösung ja skaliert suche ich für dieses Problem nun seit über 4,5 Stunden einen Workaround.

Hab mich bereits durch google gewühlt und viele Sachen ausprobiert von Javascript über selbst angefertigte Php-Lösungen und was weiss ich nicht alles...

Weil leider nichts wirklich funktioniert hat such ich mir jetzt Hilfe.

Mein letztes Ergebnis ist das jQuery Plugin zum Thema Responsive Image Maps.

siehe: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Leider kriege ich auch diese Lösung nicht zum Laufen.

HTML: 
		<img src="images/Kontakt_mia.jpg" alt="kontakt" width="100%" height="100%" style="z-index:1" usemap="#Start" />
	
		<map name="Start">
			<area shape="rect" coords="300,150,450,300" 
			href="" alt="startseite" />
			
			<area shape="rect" coords="70,620,170,700" 
			href="" alt="startseite" />
			
			<area shape="rect" coords="210,620,310,700" 
			href="" alt="startseite" />
			
			<area shape="rect" coords="350,620,450,700" 
			href="" alt="startseite" />
		</map>

Code: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
});
</script>

Aber die verlinkten Bereiche funktionieren nach wie vor nur auf 1920x1080 und nicht auf 1600x900.

Was ist falsch ?

Danke für die Hilfe!

Gruß
 
Ok, hab ich in allen Varianten ausprobiert, hat leider keinen Effekt.

Das muss doch auch einfacher gehen ne Image-Map mit %-Angaben zu bauen... :(
 
Ist halt von fertig und optimiert noch weit entfernt aber um diese Seite geht es:

http://illutie.de/test/kontakt.html

Und bei dem Hintergrundbild will ich halt jetzt, dass der Brief zum beispiel zum mailto: ... führt.

Bei einer Auflösung von 1920x1080 sind die korrekten Bereiche verlinkt. (wenn man es gerne testen möchte)
 
Kein Wunder, dass es nicht geht: Der Inhalt von jquery.rwdImageMaps.min.js sieht so aus:
Code: 
<!DOCTYPE html>
<html class="   ">
  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object# article: http://ogp.me/ns/article# profile: http://ogp.me/ns/profile#">
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    
    <title>jQuery-rwdImageMaps/jquery.rwdImageMaps.min.js at master · stowball/jQuery-rwdImageMaps · GitHub</title>
    <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub" />
    <link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub" />
    <link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-114.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-144.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" />
    <meta property="fb:app_id" content="1401488693436528"/>

      <meta content="@github" name="twitter:site" /><meta content="summary" name="twitter:card" /><meta content="stowball/jQuery-rwdImageMaps" name="twitter:title" /><meta content="jQuery-rwdImageMaps - Responsive Image Maps jQuery Plugin" name="twitter:description" /><meta content="https://avatars0.githubusercontent.com/u/853552?s=400" name="twitter:image:src" />
<meta content="GitHub" property="og:site_name" /><meta content="object" property="og:type" /><meta content="https://avatars0.githubusercontent.com/u/853552?s=400" property="og:image" /><meta content="stowball/jQuery-rwdImageMaps" property="og:title" /><meta content="https://github.com/stowball/jQuery-rwdImageMaps" property="og:url" /><meta content="jQuery-rwdImageMaps - Responsive Image Maps jQuery Plugin" property="og:description" />
d. h. es ist kein Javascript sondern HTML. Da muss dir beim Herunterladen ein Fehler unterlaufen sein.
 
Funktioniert aber leider immernoch nicht, obwohl ich jetzt

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

im Head eingebunden hab....
 
Also bei mir funktioniert es, wenn ich es so mache wie in der Beispielseite. D. h. absolute Größenangabe:
Code: 
<img class="mia" src="Illuti%C3%A9-Dateien/Kontakt_mia.jpg" alt="kontakt" style="z-index:1" usemap="#Start" height="1253" width="2560">
und responsives Verhalten im CSS:
Code: 
	<style>
	img[usemap] {
		border: none;
		height: auto;
		max-width: 100%;
		width: auto;
	}
	</style>
Allerdings liegen deine Bereich teilweise weit neben den Symbolen:
illutie_imagemap.jpg
Wahrscheinlich hast Du beim Festlegen eine größengeänderte Version der Grafik verwendet.
 
Ja stimmt die Bereiche sind da aber an der falschen Stelle. Das Problem ist wenn ich den Code so einfüge, wie vorgeschlagen dann geht das Bild bis zum Ende der Seite, ist also im Prinzip in der Höhe zu groß.

Für den Bereich in dem das Bild erscheinen soll sind 87% der Bildschirmhöhe vorgesehen.

Da die Illustratorin mit der ich zusammenarbeite mit einer Auflösung von 2560 x 1440 arbeitet hab ich ihr also gesagt das Bild soll eine Größe von 2560 x 1253 Pixel haben.

(1440 * 0.87 ~ 1253)

Liegt da evtl. der Fehler ?

Ich weiss es nicht... vielleicht mach ich es morgen auch einfach so, dass ich mit Divs und CSS Bereiche anlege die zu den gewünschten Stellen passen. Die kann ich mit %-Angaben positionieren und dann als Link definieren.

Aber vielen Dank schon einmal!

Und wenn jemand noch ne Idee zu der Größe des Hintergrundbildes hat, würd ich mich auch freuen.

(Ich arbeite selber auf 1920 x 1080, aber es soll halt auch auf 2560x1440 passen deshalb haben wir ein großes Bild genommen, kleiner skalieren ist dann ja kein Problem)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück