• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage HTML Area Map mit Auswechselnden PNG Dateien

B

Blade8895

Neues Mitglied
Guten tag,
und zwar habe ich Grundkenntnisse von Html, PHP und CSS doch wenn ich google durchforste auf der suche nach einer Lösung ergibt das gefundene einfach keinen sinn oder es geht weit über mein eigenes Verständnis hinaus ;P .


Ich Benötige eine Landingpage mit 2 Buttons die somit auch als link fungieren. bei buttons leiten auf unterordner innerhalb des Webspaces um! z.b. Button1= url.tld/ordner1/ & Button2 url.tld/ordner2/
Desweiteren weiß ich dass man die buttons am allerbesten mit CSS erstellt für den fall für die ich sie benötige (siehe bild).
Da ich was ich benötige nicht per sonderlich gut über Wörter ausrdrücken kann habe ich einfach mal was in Photoshop zusammengebastelt.
Hoffe dies ist auch so umsetzbar!
Die Bilder innerhalb des Bildes sind nur Platzhalter und sollen mein anliegen besser darstellen. (ps. ich weiß das die linien nciht gerade sind sind schließlich nur auf die schnelle gemacht.)

entwurf.png



Hoffe ich habe es halbwegs annehmbar erklärt und ihr könnt mir helfen!

MfG
Blade
 
Blade8895 schrieb:
Guten tag,
und zwar habe ich Grundkenntnisse von Html, PHP und CSS doch wenn ich google durchforste auf der suche nach einer Lösung ergibt das gefundene einfach keinen sinn oder es geht weit über mein eigenes Verständnis hinaus ;P .


Ich Benötige eine Landingpage mit 2 Buttons die somit auch als link fungieren. bei buttons leiten auf unterordner innerhalb des Webspaces um! z.b. Button1= url.tld/ordner1/ & Button2 url.tld/ordner2/
Desweiteren weiß ich dass man die buttons am allerbesten mit CSS erstellt für den fall für die ich sie benötige (siehe bild).
Da ich was ich benötige nicht per sonderlich gut über Wörter ausrdrücken kann habe ich einfach mal was in Photoshop zusammengebastelt.
Hoffe dies ist auch so umsetzbar!
Die Bilder innerhalb des Bildes sind nur Platzhalter und sollen mein anliegen besser darstellen. (ps. ich weiß das die linien nciht gerade sind sind schließlich nur auf die schnelle gemacht.)

entwurf.png



Hoffe ich habe es halbwegs annehmbar erklärt und ihr könnt mir helfen!

MfG
Blade
Zum Vergrößern anklicken....

http://www.w3schools.com/tags/tag_area.asp
 
Also den lösungsvorschlag von scbawik finde ich schonmal nicht schlecht und auch umsetzbar!

Was ich mit Dynamisch halt meine ist evtl auch falsch ausgedrückt.
Damit meine ich im grunde dass die Bilder im ursprung schwarz weiß sind und in ihrer Form sind, sobald man mit der Maus drüber geht (ergo Hover effekt über css) sollte er sich halt in farbe setzen und um ein paar pixel größer werden.

Dennoch werde ich mal die lösung von scbawik ausprobieren und sehen ob es zu unserer zufriedenheit funktioniert.

MfG Blade
 
Also ich melde mich nun schon zum 2. Mal (sorry! :D) zum Thema Area Map
Undzwar ahbe ich jetzt mal mit vielen Leuten über das Thema geredet aber scheinbar ist das Etwas was nicht oft zum Einsatz kommt. Und wie sagt man so schön Viele Köche verderben den Brei. Daher habe ich den Code wieder auf Anfang zurückgesetzt.
Und Versuche mal eure Hilfe in Anspruch zu nehmen.

Wie das ganze funktionieren soll ist ja dem recht einfach gestriktem Code zu entnehmen
HTML: 
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<script type="text/javascript">
window.addEventListener ('load', function () {
var map = document.querySelectorAll('#Mapi area');
for (var i=0; i<map.length; i++) {
   if (map[i].addEventListener) {
   map[i].addEventListener('touchstart', swap, false);
   map[i].addEventListener('mouseover', swap, false);
   }
}

function swap(ev) {
   var lan = this.getAttribute('alt');
   document.getElementById('Map1').setAttribute('src','images/' + lan);
   return false;
}
});
</script>
<img src="http://tekkcorp.de/images/landingpage-sw.png" alt="landingpage-sw.png" usemap="#Map" />
<map name="Map" id="Map1">
    <area alt="landingpage1.png" title="" href="http://tekkcorp.de/arma" shape="poly" coords="28,1067,28,15,1083,14,1089,147,808,924,808,1068" />
    <area alt="landingpage2.png" title="" href="http://tekkcorp.de/mta" shape="poly" coords="831,1064,828,926,1108,151,1107,16,1888,15,1888,1065" />
</map>

Derzeit Aktives Beispiel ist zu finden unter http://TekkCorp.de

Ach desweiteren müsste der Pfad für die images auch richtig sein -> <httpdocs> -> images -> Datei.endung


Desweiteren ist mein Anliegen wie bekomme ich das Ganze Auflösungs unabhängig ohne das damit die Area zerschossen wird? mit einer art IFrame?

Hoffe ihr könnt mir helfen!
 
Blade8895 schrieb:
Desweiteren ist mein Anliegen wie bekomme ich das Ganze Auflösungs unabhängig ohne das damit die Area zerschossen wird?
Zum Vergrößern anklicken....
Dazu hatte ich Dir schon einen Link empfohlen - siehe der zweitgenannte:
Spicelab schrieb:
Wie zum Beispiel:
Zum Vergrößern anklicken....
Ansonsten kann ich nicht nachvollziehen, warum das Ganze wieder bei Null beginnen soll.
 
ok ich habe es nun mal weiter probiert mithilfe der zuvor gegebenen Quellen.
Das Resizen funktioniert zwar.... aber auch nicht wie es soll wenn ich mithilfe der "Zoom" Funktion verkleinere ca. 75% in meinem fall ist das Re-Scaling der Area Map perfekt. Doch wenn ich es jetzt mittels Style Element verkleinere zerstört es wieder die Image Map.

verkleinert habe ich mit
HTML: 
img.bild {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

Doch muss ich eben auf 75% runterskalieren damit die Img Map wieder passt.

HTML: 
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
<html>
<head>
<script src="jquery.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
// ------------------------------------- //
window.addEventListener ('load', function () {
var map = document.querySelectorAll('#Map1 area');
for (var i=0; i<map.length; i++) {
   if (map[i].addEventListener) {
   map[i].addEventListener('touchstart', swap, false);
   map[i].addEventListener('mouseover', swap, false);
   map[i].addEventListener('mouseout', swap, false);
   }
}

function swap(ev) {
   var lan = this.getAttribute('alt');
   document.getElementById('src1').setAttribute('src','images/' + lan);
   return false;
}
});
$(document).ready(function() {
    $('map').imageMapResize();
});
</script>
<style>
body
{
    background-color: gray;
}
#divImgContainer img
{
    width: 100%;
    transition: width 2s; /* Safari */
}

</style>
</head>
<body>
<center>
<div id="container">
<div id="divImgContainer">
    <img src="http://tekkcorp.de/images/landingpage-sw.png" class="bild" id='src1' alt="landingpage-sw.png" usemap="#Map"/>
<map name="Map" id="Map1">
    <area alt="landingpage1.png" title="" href="http://tekkcorp.de/arma" shape="poly" coords="28,1067,28,15,1083,14,1089,147,808,924,808,1068" class="Map1-area" id="Map1-area-1" />
    <area alt="landingpage2.png" title="" href="http://tekkcorp.de/mta" shape="poly" coords="831,1064,828,926,1108,151,1107,16,1888,15,1888,1065" class="Map1-area" id="Map1-area-2" />
</map>
</div>
</div>
</center>
</body>
</html>

Ein Aktives Bsp. ist auch immer unter http://tekkcorp.de zu finden


Problem hat sich erledigt!
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben