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

Mouseover Werbung auf Kunstrasenplatz

B

Broach

Neues Mitglied
Hallo zusammen,
möchten für unseren Kunstrasenplatz Werbepartner gewinnen.
Jeder einzelne Quadratmeter soll wenn möglich verkauft werden.
Die Sponsoren sollen sich dies dann auf unserer Homepage anschauen können.
Würde dies gern so haben, dass im Hindergrund das Bild vom Platz mit den einzelnen Quadratmeter liegt,
wenn man dann über eine drüber fährt soll der Werbepartner entweder als Bild oder Name erscheinen.
Könnt ihr mir bitte Ansätze nennen wie das möglich ist oder kann mir sogar jemand eine Lösung schreiben?
Plan.jpg
Plan.jpg
Danke euch im Voraus ...
Ciao Broach
 
Dein Elfmeterpunkt liegt aber merkwürdig und das Seitenverhältnis stimmt auch nicht so ganz :D
 
Zwei Bilddateien in einen Ordner und dann bitte den Quelltext in eine Datei in selben Verzeichnis.
hover.jpgPlan.jpg

Folgendes Habe ich mir dann mal angepasst:

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Projekt Kunstrasenplatz</title>
<meta name="Author" content="Pulli" />


<style type="text/css">
/* set up the font to be used for the page */
body {font-family: tahoma; arial, sans-serif;}


/* set the size of the definition list &lt;dl&gt; and add the background image */
#imap {display:block; width:1192px; height:597px; background:url(Plan.jpg) no-repeat; position:relative;}


/* set up the definition list &lt;dt&gt;&lt;a&gt; to hold the background image for the hover state */
#imap a#title {display:block; width:1192px; height:0; padding-top:597px; overflow:hidden; position:absolute; left:0; top:0; background:transparent url(hover.jpg) no-repeat 200px 200px; cursor:default;}


/* the &lt;dt&gt;&lt;a&gt; hover style to move the background image to position 0 0*/
#imap a#title:hover {background-position: 0 0; z-index:10;}


/* place the &lt;dd&gt;s in the correct absolute position */
#imap dd {position:absolute; padding:0; margin:0;}
#imap #pic1 {left:0px; top:00px; z-index:20;}
#imap #pic2 {left:578px; top:281px; z-index:20;}
#imap #pic3 {left:596px; top:281px; z-index:20;}
#imap #pic4 {left:578px; top:300px; z-index:20;}
#imap #pic5 {left:596px; top:300px; z-index:20;}
#imap #pic6 {left:35px; top:00px; z-index:20;}
#imap #pic7 {left:53px; top:00px; z-index:20;}


/* style the &lt;dd&gt;&lt;a&gt; links physical size and the background image for the hover */
#imap a#K,
#imap a#Bernd,
#imap a#Preis,
#imap a#Maus
{display:block; width:18px; height:18px; background:transparent url(hover.jpg) -100px -100px no-repeat; text-decoration:none; z-index:20;}


/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {display:none;}


/* move the link background image to position 0 0 when hovered */
#imap a#K:hover,
#imap a#Bernd:hover,
#imap a#Preis:hover,
#imap a#Maus:hover
{background-position:0 0;}


/* define the common styling for the span text */
#imap a:hover span {position:absolute; width:200px; height:200px; display:block; font-family:arial; font-size:12px; background:#fff; color:#000; border:1px solid #000; padding:5px;}


/* move the span text to a common position at the bottom of the image map */
#imap a#K:hover span {left:1px; top:1px;}
#imap a#Bernd:hover span {left:1px; top:1px;}
#imap a#Preis:hover span {left:1px; top:1px;}
#imap a#Maus:hover span {left:1px; top:1px;}


/* add the style for the link span text - first line */
#imap a span:first-line {font-weight:bold; font-style:italic;}


#ads {margin-top:150px;}
</style>
</head>


<body>


<h2>Sponsoren des Kunstrasenplatz</h2>
<h3>Auch Sie koennen mitmachen</h3>
<dl id="imap">
<dt><a id="title" href="#nogo" title="Sponsoren Kunstrasenplatz">The Beatles</a></dt>
<dd id="pic1"><a id="K" title="Kuechen" href="#nogo"><span>Kuechen Doerr - Ihr Küchenspezialist<br /><br />Berti und seine Kuechen.</span></a></dd>
<dd id="pic2"><a id="Bernd" title="Bernd Maerz 1" href="#nogo"><span>Bernd Maerz - Privatperson<br /><br />1. Vorsitzende.</span></a></dd>
<dd id="pic3"><a id="Bernd" title="Bernd März 2" href="#nogo"><span>Bernd Maerz - Privatperson<br /><br />1. Vorsitzende.</span></a></dd>
<dd id="pic4"><a id="Bernd" title="Bernd März 3" href="#nogo"><span>Bernd Maerz - Privatperson<br /><br />1. Vorsitzende.</span></a></dd>
<dd id="pic5"><a id="Bernd" title="Bernd März 4" href="#nogo"><span>Bernd Maerz - Privatperson<br /><br />1. Vorsitzende.</span></a></dd>
<dd id="pic6"><a id="Preis" title="Fenster Preis" href="#nogo"><span>Fenster Preis<br /><br />Fenster für Ihr Heim.</span></a></dd>
<dd id="pic7"><a id="Maus" title="Maeusekueche" href="#nogo"><span>Maeusekueche<br /><br />Ihr Restaurant.</span></a></dd>
</dl>


</body>
</html>
 
Habe jetzt noch ein Paar Fragen dazu.
1. Wenn man sich mit der Mouse nicht auf dem Bild befindet, sollen alle grünen Punkte erscheinen die belegt sind.
2. Wenn ich auf einem grünen Punkt drauf bin, soll die ausführliche Beschreibung unterhalb des Spielfeldes erscheinen.
3. Bei der ausführlichen Beschreibung möchte ich auch ein Banner oder Bild des Sponsors präsentieren.
 
Broach schrieb:
Hallo zusammen,

Könnt ihr mir bitte Ansätze nennen wie das möglich ist oder kann mir sogar jemand eine Lösung schreiben?

Ciao Broach
Zum Vergrößern anklicken....

Einen Ansatz kann ich dir nennen. Aber schreiben musst du es schon selber, oder den Auftrag in die Jobbörse stellen. Das ist auch keine simple HTML-Datei, sondern eine Ajax/PHP/MySQL-Aufgabe. Mit einer Image-Map würde es zur Sisyphos-Aufgabe. Das sind ja gefühlte 2000 Kästchen.

Möglicher Ansatz:
- Erstelle das Bild in einem Grafikprogramm wie Illustrator oder Photoshop und achte darauf, mit Pixeln statt mm zu arbeiten.
- Exportiere das Bild anschließend als .jpg oder .png und binde es als background-image in ein Div ein.
- Über den Div-Container legst du einen weiteren in der selben Größe.
- In den oberen Container kommen nun analog zu den Kästchen des Hintergrundbildes Blockelemente (p oder div). Sodass über jedem Kästchen ein unsichtbares HTML-Element derselben Größe liegt. Ich würde den Elementen eine aufsteigende ID, gemeinsame Klasse und eventuell noch ein data-Attribut mitgeben. Das realisiert man mittels einer PHP-Schleife.
- Die ID kommt mit dem Namen des Sponsoren und eventueller Zusatzinfos in eine MySQL-Datenbank.
- Im letzen Schritt baust du dann eine JavaScript/Ajax-Funktion, die beim Hovern über ein Kästchen dessen ID durchreicht, den korrespondierenden Datensatz zurückliefert, ein HTML-Element erzeugt und die Daten dort ausgibt.

Ohne fortgeschrittene Kenntnisse bekommst du das nicht hin.
 
Komplex würde es dann, wenn der User beim Klick auf ein freies Feld zu Paypal weitergeleitet wird und sich nach Überweisen einer großzügigen Spende dieses Feld automatisch mit den Daten des Sponsors aktualisieren soll. ^^

Aber wie bereits erwähnt: Das ist keine Aufgabe für Einsteiger. Wenn es um eine gewerbliche Sache geht und du damit Geld verdienst, dann suche dir lieber eine Agentur, die mit der Materie vertraut ist.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben