Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 9
Seite [1]
1a Schnitzel


Going for pro





Beiträge: 518
 # Thema - 11.07.2009 um 08:18 Uhr
Ich habe ein großes Bild von einem Motorrad und da soll ein Mouseover rein.
Wenn man über bestimmte Bereiche von dem Bild geht, z.B. über den Auspuff, soll ein großes Bild von dem Bereich/Auspuff erscheinen.

Wollte es mit flash machen, aber derjenige will es nicht da er es selber noch bearbeiten können muss.

Gibts da was einfacheres als das Bild in viele Bereiche zu cuten und diese bereiche dann z.B. dann mit einem Mouseover Lightbox script zu versehen? so hätte ich es jetzt gemacht.

Hat jemand zufällig nen Link zu einem Script mit dem ich das am besten machen kann?
Inaktiv
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
 # Antwort: 1 - 11.07.2009 um 13:10 Uhr
ja, du kannst ein großen div machen (so groß wie das bild), da das bild als hintergrund rein.

in den div rein dann einen (oder mehrere) anders divs, die man nicht sieht, aber die du so platzierst, dass sie über den "mouseover-stellen" liegen, also z.B. über dem auspuff.

auf die divs bindest du dann ein mouseover mit dem effeckt, den du wünschst. eben das eine größeres bild eingeblendet wird.


------------------
www.laszlokorte.de

Inaktiv
|
Nachtmeister


Specialist




Herkunft: Bern
Beiträge: 2091
 # Antwort: 2 - 11.07.2009 um 13:20 Uhr
hmm. Dafür gäbe es doch dieses HTML Element (map irgendwas). Damit lassen sich auf einem Bild doch per Koordinaten Punkte setzen und Links. Damit könnte man ja agieren. Sorry, mir fällt der Name dieses Tags irgendwie grad nicht ein.


------------------
"God created the universe in 1 Day, and then spent 5 days making it look good In Internet Explorer"

Inaktiv
|
hajo ClanSphere Team


VIP - Poster




Herkunft: Barsbüttel
Beiträge: 9411
 # Antwort: 3 - 11.07.2009 um 13:28 Uhr
img mit usemap und die map mit passenden areas definieren


------------------
ClanSphere - professional clan care starts here

Inaktiv
|
1a Schnitzel
Thread-Ersteller


Going for pro





Beiträge: 518
 # Antwort: 4 - 11.07.2009 um 13:40 Uhr
Ah ja usemap, bin ich vor Ewigkeiten mal drüber gestolpert und hatte es komplett wieder vergessen
Nu fällt es mir wieder ein das da ja mal was war, das ist glaube genau das was ich brauche, werds mir gleich mal anschauen.

Mit den divs wäre es auch gegangen, aber ich glaube usemap ist doch ein wenig bequemer, mir wurde also erstmal geholfen, danke schonmal


Inaktiv
|
SCHIRI ClanSphere Team


Weltmeister



Herkunft: Hamburg
Beiträge: 5299
 # Antwort: 5 - 11.07.2009 um 16:10 Uhr
hm ich war der meinung, dass usemap zwar links auf bereichen des bildes platzieren kann, aber sich als DOM-Element die imagemap nicht WIRKLICH an der stelle befindet. sprich: javascript-eventhandler wie mouseover funktionieren nicht.


------------------
www.laszlokorte.de

Inaktiv
|
1a Schnitzel
Thread-Ersteller


Going for pro





Beiträge: 518
 # Antwort: 6 - 11.07.2009 um 23:36 Uhr
11.07.2009 um 16:10 Uhr - SCHIRI:
hm ich war der meinung, dass usemap zwar links auf bereichen des bildes platzieren kann, aber sich als DOM-Element die imagemap nicht WIRKLICH an der stelle befindet. sprich: javascript-eventhandler wie mouseover funktionieren nicht.


Mhh, muss ich dann wohl testen ob ich da irgendwie nen mouseover rein bekomme, ansonsten halt zurück zu den divs.


Inaktiv
|
Nachtmeister


Specialist




Herkunft: Bern
Beiträge: 2091
 # Antwort: 7 - 12.07.2009 um 10:52 Uhr
Hab das auch noch nie probiert. Vielleicht kriegst du es ja mit jQuery hin. jQuery hat ja so diverste Bugfixes auch für IE6 und Co. eingebaut. Vielleicht ist auch dafür ein Work Around dabei.

Vielleicht sowas in der Art (ungetestet)
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
1. / 2. / ... 
 
$('area').click(function() { 
    var url = $(this).attr('href'); 
    var coords = $(this).attr('coords').split(','); 

    // Your code here 

    // To prevent default action 
  return false; 
}); 


Und in HTML dann so (als Beispiel):

 
1.
2.
3.
4.
5.
6.
1. / 2. / ... 
 
<img src="bigImage.gif" usemap="#parts" />  
<map name="parts">  
  <area shape="rect" coords="20,6,200,60" href="http://www.boo.uz">  
  <area shape="circle" coords="100,200,50" href="http://www.google.com">  
</map>


(Quelle: http://jquery-howto.blogspot.com/2009/01/jquery-and-html-image-maps.html)

Sieht für mich nicht all zu Dumm aus. Dafür musst du natürlich noch das jQuery Javascript File runterladen und einbinden. Danach machst du eine zweite .js Datei und kopierst den oberen JS Teil hinein. split(',') kannst du dann mit einer anderen Aktion ersetzen, z.B. addClass oder sonst was. Ich müsste das zuerst auch ausprobieren, aber kannst ja mal ein wenig basteln und sehen, was dabei rauskommt.


------------------
"God created the universe in 1 Day, and then spent 5 days making it look good In Internet Explorer"

Inaktiv
|
1a Schnitzel
Thread-Ersteller


Going for pro





Beiträge: 518
 # Antwort: 8 - 13.07.2009 um 05:49 Uhr
Hehe häts mir einfacher vorgestellt, werds mal ausprobieren

Aber den Spaß hebe ich mir bis zum Schluss auf, vielleicht gibts hier ja bis dahin noch Anregungen wie mans auch noch machen kann


Inaktiv
|
1a Schnitzel
Thread-Ersteller


Going for pro





Beiträge: 518
 # Antwort: 9 - 25.07.2009 um 14:42 Uhr
Hab mich gerade nochmal drangesetzt und habs mouseover ohne jquery hinbekommen.
Dabei handelt es sich jetzt um einen Bilderswap, ich brauche es aber so das ein Bild aufploppt wenn ich über den map/mouseover Bereich fahre.

Was muss ich nun am folgenden code ändern damit sich nur ein Bild öffnet anstelle des Bilderswaps?:


 
1.
2.
3.
4.
1. / 2. / ... 
 <IMG name="aab" SRC="images/test.jpg" ALT="imagemap" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="233,187,283,224" href="home.html" onMouseOver="document.aab.src ='images/test2.jpg'" onMouseOut="document.aab.src = 'images/test.jpg'" alt="Home">
</map> 
Inaktiv
|
Antworten: 9
Seite [1]


Sie müssen sich registrieren, um zu antworten.