Online-Zeit©
 168  1408  6.515  0
close× Call Us +49 (1805) 01 29 59
close×
  • Foren Themen: 3725
  • Foren Beiträge: 26383
  • Unbeantwortete Beiträge: 249
  • PHP-Fusion v7.02.07 - DE
  • PHP 8.2.20
  • Datum 01.09.2024 - Zeit Uhr

HarlekinPower
Thread Author: Jeff
Thread ID: 2401
Thread Info
Es gibt 20 Beiträge zu diesem Thema, und es wurde 2845 mal angesehen.
PHPFusion-SupportClub » Allgemein » Grafik und Design
Wer ist hier? 1 Gäste
 Thema drucken
Map-Tag + Rollover
Jeff
Top  #1 Beitrag drucken
Geschrieben am 10.02.2010 00000002 13:40
Hallo, ich beschäftige mich grad mit map-Tags.

Ich habe es geschaft ein bild so zu machen das man auf einzelne bereiche klicken kann. Nun habe ich per Photoshop ein bild erstellt für ein Rollover (Mouseover) effekt. Nun wollte ich fragen ob man diese 2 sachen kombinieren kann.

Also das ich wenn ich auf dem Bild mit mehreren Map-Tags auf ein feld klicke sich dieses ändert wenn ich mit der maus drüber fahre.


Mit freundlichen Gruß

reyman
 
SC-Ad-Bot
Advertisement
 
emblinux
Top  #2 Beitrag drucken
Geschrieben am 10.02.2010 00000002 13:50
jas das geht. Da kommt dann noch etwas Javascript mit ins Spiel.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #3 Beitrag drucken
Geschrieben am 10.02.2010 00000002 14:36
Okay kann mir villeicht jemand ein beispiel geben ? Und wie man das unter php fusion einbaut ?
 
emblinux
Top  #4 Beitrag drucken
Geschrieben am 10.02.2010 00000002 15:32
Ich glaube ich habe dich doch etwas missverstanden. Ich dachte du möchtest per Mouseover (Rollover) auf einem Bereich des Image-Maps einen anderen Bereich ändern. Den Bereich, wo die Mousedrüber fährt kann man so nicht ändern. Dazu müsstest du anders verfahren.

Zerlege das Bild in rechteckige Teile, so wie du es benötigst und speichere die Bilder für dich eindeutig. Das machst du mit dem Bild, welches als Rollover-Bild dienen soll auch, wenn notwendig. (Also wenn es nicht sowieso schon ein Teilbild ist)
Dann baust du dir eine Tabelle und fügst dort entsprechend die Bilder ein. Dort kannst du dann per Mouseover (oder auch per OnClick) bei jedem einzelnen Bild dieses auch ändern.

Hier mal ein Beilspiel zum Verständnis.

Code Download Code  

<table>

 <tr>

  <td><img src='bild1.jpg' onclick="this.src='bild1b.jpg'" /></td>

  <td><img src='bild2.jpg' onclick="this.src='bild2b.jpg'" /></td>

 </tr>

 <tr>

  <td><img src='bild3.jpg' onclick="this.src='bild3b.jpg'" /></td>

  <td><img src='bild4.jpg' onclick="this.src='bild4b.jpg'" /></td>

 </tr>

</table>


So in der Art müsste es dann funktionieren.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #5 Beitrag drucken
Geschrieben am 11.02.2010 00000002 13:49
Ich danke ersteinmal für die Hilfe.

Da gibt es 2 kleine Probleme. Bei dem Skript muss man auf das Bild klicken damit es sich verändert und wenn ich das ganze in der Tabelle macht bleiben lücken zwischen den Bildern.
Code Download Code  



<script>

button1_a= new Image();

button1_a.src = "../../images/NPC/UnsereGilde.jpg"

button1_b= new Image();

button1_b.src = "../../images/NPC/UnsereGilde11.jpg"

button2_a= new Image();

button2_a.src = "../../images/NPC/Gaestebuch0.jpg"

button2_b= new Image();

button2_b.src = "../../images/NPC/Gaestebuch01.jpg"

button3_a= new Image();

button3_a.src = "../../images/NPC/Forum.jpg"

button3_b= new Image();

button3_b.src = "../../images/NPC/Forum1.jpg"

</script>



<center>

<a href="http://diemächtigen.de/teamlist.php" 

onmouseover="austausch1.src='../../images/NPC/UnsereGilde11.jpg';"

onmouseout="austausch1.src='../../images/NPC/UnsereGilde.jpg'"> 

<img src="../../images/NPC/UnsereGilde.jpg" 

border="0"name="austausch1"></a>

<br>

<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php" 

onmouseover="austausch2.src='../../images/NPC/Gaestebuch01.jpg';"

onmouseout="austausch2.src='../../images/NPC/Gaestebuch0.jpg'"> 

<img src="../../images/NPC/Gaestebuch0.jpg" 

border="0"name="austausch2"></a>

<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php" 

onmouseover="austausch3.src='../../images/NPC/Forum1.jpg';"

onmouseout="austausch3.src='../../images/NPC/Forum.jpg'"> 

<img src="../../images/NPC/Forum.jpg" 

border="0"name="austausch3"></a>

</center>

Das ist jetzt zum Beispiel so wie ich das gemacht hatte. Habe die Bilder auseinandergeschnitten und so entstand auch keine lücke. Nur wenn ich jetzt 2 Bilder nebeneinander habe ist dazwischen eine Minimale lücke. ( das ist bei dem 2. & 3. Bild das in der Mitte eine kleinelücke ist)

Kann man das korrigieren ?
Bearbeitet von Jeff am 11.02.2010 00000002 13:51
 
emblinux
Top  #6 Beitrag drucken
Geschrieben am 11.02.2010 00000002 14:43
Man kann das ganze ruhig in eine tabelle machen. Natürlich muss man da einiges beachten, z.B. alle Teilbilder müssen gleich groß sein, zumindest pro Spalte und Zeile. Der tabelle sagen, das der Abstand zw. den Zellen 0 ist. ( cellpadding='0' cellspacing='0'Wink In den tabellenfeldern darf man natürlich auch kein Leerzeichen irgendwo haben. Wenn du dich daran hälst, dann geht das auch in einer Tabelle.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #7 Beitrag drucken
Geschrieben am 11.02.2010 00000002 14:48
Also es geht nicht, wenn ich ein ein Großes bild habe darunter 2 und darunter wieder nur ein großes ?
 
emblinux
Top  #8 Beitrag drucken
Geschrieben am 11.02.2010 00000002 14:55
Doch, aber auch da muss man folgendes beachten. Die 2 Bilder müssen zusammen genauso groß sein, wie das eine große Bild. Und die beiden großen Bilder solten dann die gleiche größe haben.

Das sieht dann z.B. so aus:

Code Download Code  

<table cellspacing='0' cellpadding='0'>

 <tr>

  <td collspan='2'><img src='bild1.jpg' onclick="this.src='bild1b.jpg'" /></td>

 </tr>

 <tr>

  <td><img src='bild2.jpg' onclick="this.src='bild2b.jpg'" /></td>

  <td><img src='bild3.jpg' onclick="this.src='bild3b.jpg'" /></td>

 </tr>

 <tr>

  <td colspan='2'><img src='bild4.jpg' onclick="this.src='bild4b.jpg'" /></td>

 </tr>

</table>
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #9 Beitrag drucken
Geschrieben am 11.02.2010 00000002 15:05
Also ich habe es jetzt so gemacht

Code Download Code  



<center>

<table border="0" cellpadding='0' cellspacing='0'>

<tr>

  <td><a href="http://diemächtigen.de/teamlist.php" 

onmouseover="austausch1.src='../../images/NPC/UnsereGilde11.jpg';"

onmouseout="austausch1.src='../../images/NPC/UnsereGilde.jpg'"> 

<img src="../../images/NPC/UnsereGilde.jpg" 

border="0"name="austausch1"></a></td>

<tr>

  <td><a href="http://diemächtigen.de/infusions/guest_book/guest_book.php" 

onmouseover="austausch2.src='../../images/NPC/Gaestebuch01.jpg';"

onmouseout="austausch2.src='../../images/NPC/Gaestebuch0.jpg'"> 

<img src="../../images/NPC/Gaestebuch0.jpg" 

border="0"name="austausch2"></a>

<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php" 

onmouseover="austausch3.src='../../images/NPC/Forum1.jpg';"

onmouseout="austausch3.src='../../images/NPC/Forum.jpg'"> 

<img src="../../images/NPC/Forum.jpg" 

border="0"name="austausch3"></a></td>

 </tr>

</table>

</center>


Aber die lücke zwischen 2. & 3. Bild bleibt. Und beide bilde sind genauso groß wie das 1. Bild.

Wie würde das denn eig. aussehen wenn ich bei deinem Code mit Mousover arbeiten würdeund nicht onclick ?
Bearbeitet von Jeff am 11.02.2010 00000002 15:09
 
emblinux
Top  #10 Beitrag drucken
Geschrieben am 11.02.2010 00000002 15:14
packe mal bitte alles (Bilder und html datei) in ein Archiv (zip oder rar, ist egal) und hänge es mal hier an, dann schaue ich mal drüber.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #11 Beitrag drucken
Geschrieben am 11.02.2010 00000002 15:22
Es hat sich erledigt.

Ich habe ein <tr td> dazwischen kleben.. nun passt alles

Ich danke für deine Hilfe. Hast mir sehr geholfen Wink
Bearbeitet von Jeff am 11.02.2010 00000002 15:24
 
emblinux
Top  #12 Beitrag drucken
Geschrieben am 11.02.2010 00000002 15:27
Alles klar, wobei du deine Tags alle nochmal überprüfen solltest, in dem Codeschnipsel von dir fehelen einige End-Tags und wenn du XHTML konform sein möchtest, dann muss beim IMG-Tag am Ende auch ein / vor dem >

Schau dir einfach meine Beispiel an.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #13 Beitrag drucken
Geschrieben am 11.02.2010 00000002 15:35
Ja das sehe ich auch immer wieder bei anderen, aber ich hab immer wieder gesehen das es bei mir auch so ohne das klappt, aber ich versuche mich mal daran zu halten. Wink

Danke nochmal
 
emblinux
Top  #14 Beitrag drucken
Geschrieben am 11.02.2010 00000002 15:45
Tja manchmal sind die Browser intelligent und korrigieren einige Fehler, aber nicht immer.

Nur sollte man, wenn man schon programmiert, sich auch an diverse Standards halten, sonst kann man es auch bleiben lassen. Denn irgendwann kann es passieren, das man mit unsauberen Quell-Code auf die Nase fällt.

Dabei gibt es doch im Netzt soviele Seiten, die einem das so gut erklären.
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #15 Beitrag drucken
Geschrieben am 11.02.2010 00000002 16:33
Ja ist richtig, aber ich hab auch grad alles geändert Wink
 
Jeff
Top  #16 Beitrag drucken
Geschrieben am 16.02.2010 00000002 19:01
So sorry das ich das thema nocheinmal aufwühle. ^^

Ich habe das ganze jetzt nebeneinander unter meinem Banner gemacht (www.DieMächtigen.de) mit folgendem Code:
Code Download Code  



<center>

<a href='http://DieMächtigen.de'><img src='http://img64.imageshack.us/img64/2015/bannervs.jpg' border='0'/></a>

<script>

button1_a= new Image();

button1_a.src = "../../images/NPC/UnsereGilde.JPG"

button1_b= new Image();

button1_b.src = "../../images/NPC/UnsereGilde1.JPG"

button2_a= new Image();

button2_a.src = "../../images/NPC/Gaestebuch.JPG"

button2_b= new Image();

button2_b.src = "../../images/NPC/Gaestebuch1.JPG"

button3_a= new Image();

button3_a.src = "../../images/NPC/Forum.JPG"

button3_b= new Image();

button3_b.src = "../../images/NPC/Forum1.JPG"

button4_a= new Image();

button4_a.src = "../../images/NPC/Fotogallerie.JPG"

button4_b= new Image();

button4_b.src = "../../images/NPC/Fotogallerie1.JPG"

button5_a= new Image();

button5_a.src = "../../images/NPC/Nuetzliches.JPG"

button5_b= new Image();

button5_b.src = "../../images/NPC/Nuetzliches1.JPG"

button6_a= new Image();

button6_a.src = "../../images/NPC/Partner.JPG"

button6_b= new Image();

button6_b.src = "../../images/NPC/Partner1.JPG"

</script>

<a href="http://diemächtigen.de/teamlist.php" 

onmouseover="austausch1.src='../../images/NPC/UnsereGilde1.JPG';"

onmouseout="austausch1.src='../../images/NPC/UnsereGilde.JPG'"/> 

<img src="../../images/NPC/UnsereGilde.JPG" 

border="0"name="austausch1"/></a>



<a href="http://diemächtigen.de/infusions/guest_book/guest_book.php" 

onmouseover="austausch2.src='../../images/NPC/Gaestebuch1.JPG';"

onmouseout="austausch2.src='../../images/NPC/Gaestebuch.JPG'"/> 

<img src="../../images/NPC/Gaestebuch.JPG" 

border="0"name="austausch2"/></a>



<a href="http://diemächtigen.de/forum/index.php" 

onmouseover="austausch3.src='../../images/NPC/Forum1.JPG';"

onmouseout="austausch3.src='../../images/NPC/Forum.JPG'"/> 

<img src="../../images/NPC/Forum.JPG" 

border="0"name="austausch3"/></a>



<a href="http://diemächtigen.de/photogallery.php" 

onmouseover="austausch4.src='../../images/NPC/Fotogallerie1.JPG';"

onmouseout="austausch4.src='../../images/NPC/Fotogallerie.JPG'"/> 

<img src="../../images/NPC/Fotogallerie.JPG" 

border="0"name="austausch4"/></a>



<a href="http://diemächtigen.de/viewpage.php?page_id=3" 

onmouseover="austausch5.src='../../images/NPC/Nuetzliches1.JPG';"

onmouseout="austausch5.src='../../images/NPC/Nuetzliches.JPG'"/> 

<img src="../../images/NPC/Nuetzliches.JPG" 

border="0"name="austausch5"/></a>



<a href="http://diemächtigen.de/partner.php" 

onmouseover="austausch6.src='../../images/NPC/Partner1.JPG';"

onmouseout="austausch6.src='../../images/NPC/Partner.JPG'"/> 

<img src="../../images/NPC/Partner.JPG" 

border="0"name="austausch6"/></a>

</center>


So nun habe ich bei google alles mögliche gesucht um ein Drop-Down_menü zu erzeugen. Jedoch ist das alles ohne Bilder. Sondern nur einfache codes.
Ich wollte das zum Beispiel: Wenn ich auf Fotogallerie gehe ein Punkt darunter auftaucht zum -> Foto einsenden. In dem selben Schema wie ich die Navigation gemacht habe mit dem Mouseover.

Ich hoffe ich habe mich verständlich ausgedrückt. Wenn nicht. Entschuldigung.
 
Jeff
Top  #17 Beitrag drucken
Geschrieben am 17.02.2010 00000002 21:55
Kann mir jemand helfen bei meiner Frage ?
 
Jeff
Top  #18 Beitrag drucken
Geschrieben am 22.02.2010 00000002 18:07
Wenn keiner mehr eine Antwort hat dann kann dies geschlossen werden...

Danke für alle Antworten.
 
emblinux
Top  #19 Beitrag drucken
Geschrieben am 22.02.2010 00000002 18:39
schau dir doch einfach mal folgendes DropDown-Menü an, eventuell hilft dir das etwas weiter.

http://www.phpfusion-mods.net/infusions/downloadsv7/dldb.php?op=view&id=669 (Registrierung zum Download erforderlich)
Das Lernen ist wie ein Meer ohne Ufer. Konfuzius

Alles wird Gut!

KEIN Support per Mail, ICQ oder PN !
www.heiseclan.de/fusion/sig.gif

www.heiseclan.de/geosig.gif
 
Website
Jeff
Top  #20 Beitrag drucken
Geschrieben am 23.02.2010 00000002 11:15
Danke ersteinmal für die Antwort. Es ist schon das was ich suche, nun hab ich etwas nachgetüftelt. Aber icvh weiß noch nicht wie ich das machen soll das von meinen Bildern aus ein down menü auf geht.

Aber ich kenne mich damit überhaupt nicht aus und denke das ich mich mit dem zufrieden geben muss.

Danke nochmal an alle
Bearbeitet von Jeff am 23.02.2010 00000002 11:42
 
Springe ins Forum:
Datalus