Bild bei Mouseover in Originalgroesse anzeigen?

Suchfunktion

Erfahrenes Mitglied
Hallo!

Ich habe einen webshop,
in dem die Grafiken von produkten leider nur recht klein (150x150px) angezeigt werden koennen.
Jetzt hatte ich die Idee, es einigen anderen Webseiten nachzumachen (*hust*) und die Funktion einzubinden, dass wenn man mit der Maus ueber das jeweilige Bild geht, sich daneben beim Mauszeiger das Bild in Originalgroesse einblendet.

Ich hoffe Ihr versteht was ich meine.
Es geht um einen Mouseover (oder mso) Effekt, welcher das ueberfahrende Bild am Mauszeiger in originalgroesse anzeigt.

Danke fuer eure Hilfe!
 
Mit der Auszeichnungssprache HTML lässt sich das nicht realisieren, da zum Anzeigen der (zunächst versteckten) Grafik eine JavaScript-Funktion erforderlich ist.

Ich schiebe den Thread daher mal in das JS-Forum.

Über die Suchfunktion solltest du dort auch Lösungen finden.
 
Maik hat gesagt.:
Mit der Auszeichnungssprache HTML lässt sich das nicht realisieren, da zum Anzeigen der (zunächst versteckten) Grafik eine JavaScript-Funktion erforderlich ist.

Ich schiebe den Thread daher mal in das JS-Forum.

Über die Suchfunktion solltest du dort auch Lösungen finden.
Aloah!
Da ich nicht wusste, ob JS, PHP oder was auch immer, habe ich es erstmal generell ins HTML-Forum gepostet.

Die Suche habe ich auch schon benutzt, aber anscheinend nicht mit den richtigen Suchwoertermn, sorry :(

Help me.. Thanks!
 
Maik hat gesagt.:
..gibt mir 23 Treffer aus ..
Es sind sogar 24 ;) und trotzdem leider nix dabei :-/


Vielleicht war mein Ziel nicht richtig erklaert:
Ich moechte, wenn ich mit der Maus ueber ein Bild gehe, an der Mauszeigerposition ein anderes Bild (bzw. das selbe Bild in einer anderen groesse) eingeblendet bekommen.
 
So, ein neues Problem:
Im großen und ganzen bekomme ich das in 'normaler hinnehmbarer Zeit' nicht hin :(
Das Haupt-Problem ist, dass die Seite Dynamisch (PHP) ist und es ca. 100 Bilder gibt, welche per Funktion und MouseOver die dazugehoerigen Bilder jeweils an der Mausposition anzeigen sollen.
Ich weiss einfach nicht, wie ich das bewerkstelligen soll, dass die ganzen Bilder ausgeblendet bleiben sollen, bis ich einen Mouseover ausfuehre.

Help :(
Ich ralle JS net :(

(Bitte respektiert meinen Wunsch, nicht erst komplett JavaScript lernen zu wollen, um alle paar Jahre mal ein kleines Script zu verwenden. Ausserdem habe ich momentan leider keine zeit dazu :()
 
Zuletzt bearbeitet:
Code:
document.onmousemove = mouse;
var x=y=0;
function mouse(e){
    x = (document.all) ? window.event.x + document.body.scrollLeft : e.pageX;
    y = (document.all) ? window.event.y + document.body.scrollTop : e.pageY;
}
Okay, also mit dem Codeteil hier hast du schonmal das Problem erschlagen, wo z.Zt. der Mauszeiger ist. Die Variablen x und y haben nämlich immer die aktuelle Mausposition gespeichert. Soweit klar oder?

Du schreibst deine großen Bilder (also die bei mouseover angezeigt werden sollen) mittels php irgentwo ins Dokument, versteckst sie aber mit style="display:none", postitionierst sie absolut, damit du sie dann später an die richtige Stelle verschieben kannst und gibst jedem eine id. Das sieht dann z.B. so aus:
HTML:
<img id="bild1" style="display:none; position: absolute;" src="bild1.gif" />
<img id="bild2" style="display:none; position: absolute;" src="bild2.gif" />
<img id="bild3" style="display:none; position: absolute;" src="bild3.gif" />

[...]

Jetzt musst du bei einem mouseover über die kleinen Bilder eine Funktion aufrufen. Diese Fuktion plaziert über style.top und style.left das passende große Bild (id als Prarameter an die Funktion übergeben) an die Stelle des Mauszeigers und ruft sich so lange per setTimeout selbst auf, bis der User von dem kleinen Bild wieder rutnergeht. So "folgt" das große Bild praktisch dem Mauszeiger. Geht der User runter (onmouseout), muss du das Timeout löschen.

Und da du selber denken sollst und ich sicher nicht deine Arbeit machen werde, programmiere ich dir Letzeres nicht aus. Benutzt dein Köpfchen, die Forensuche und selfhtml!

Wenn du Schwierigkeiten hast, poste deinen Code und beschreibe dein Problem genau, dann bekommst du weitere Tipps. So läuft das nunmal hier, denn:
http://www.tutorials.de/forum/showthread.php?t=215197 hat gesagt.:
Sinn dieses Boards ist es nicht, dass User mit Ahnung von einer bestimmten Sprache für User ohne Ahnung eine Wunschliste abarbeiten.
Ebensowenig ist es Sinn des Boards, das Basiswissen einer bestimmten Sprache zu vermitteln.
Dafür gibt es mannigfaltige Adressen im Web, die sich dies zur Aufgabe gemacht haben und sehr gut tun.

Wir machen hier nicht deine Arbeit! Für Arbeit gibt es Geld und wenn du sie nicht machen willst, wirst du wohl jemanden dafür bezahlen müssen (Job-Forum hier auf tutorials.de). Dein Wunsch nicht Javascript lernen zu müssen ist der Wunsch nach einer eierlegenden Wollmilchsau. Das ist natürlich einer der ältesten Wünsche der Menschheit, aber so läufts nunmal nicht. Daher Wunsch respektieren: ja, Wunsch erfüllen: sicher nicht. No work, no fun.

Hoffe du verstehst das.
 
Zuletzt bearbeitet:
con-f-use hat gesagt.:
Wir machen hier nicht deine Arbeit! Für Arbeit gibt es Geld und wenn du sie nicht machen willst, wirst du wohl jemanden dafür bezahlen müssen (Job-Forum hier auf tutorials.de). Dein Wunsch nicht Javascript lernen zu müssen ist der Wunsch nach einer eierlegenden Wollmilchsau. Das ist natürlich einer der ältesten Wünsche der Menschheit, aber so läufts nunmal nicht. Daher Wunsch respektieren: ja, Wunsch erfüllen: sicher nicht.

Hoffe du verstehst das.
Klar verstehe ich das, ich wollte auch nicht dass mir das jemand komplett scripted, ich brauchte lediglich den Denkanstoss.. und den habe ich jetzt.. Danke :)
 

Neue Beiträge

Zurück