CSS mouseover - Grafik un Link

[damarv]

Hallo,

ich bin neu im Forum. Auf mein Anliegen habe ich keinen Treffer bei Google finden können.

Ich möchte mehrere kleine Grafiken 80px * 60px (nennen wir diese Thumbs) listen.
Das erste Thumb zeigt ein Haus, das zweite Thumb zeigt eine Karotte, das dritte Thumb zeigt ein Feuerwehrauto

Beim überfahren des ersten Thumb mit der Maus wird eine vergrößerte Abbildung des Hauses 400px * 300px woanders (unterhalb/oberhalb/rechts von den Thumbs) dargestellt versehen mit einem Link mit Verweis auf einen Bericht über das Haus.

Nun wird das zweite Thumb mit der Maus überfahren und die damalige vergrößerte Abbildung des Hauses verschwindet, nun wird die vergrößerte Abbildung der Karotte dargestellt, versehen mit einem Link mit der Karotte.

Wenn die Maus nun vom zweiten Thumb weg gefahen wird, dann bleibt die vergrößerte Abbildung der Karotte immer noch bestehen.

Ich habe auch schon viele Webseiten gesehen, kann aber den tollen Trick nicht aus dem Quellcode extrahieren.

Ich bitte um Hilfe :grin:
P.S. Falls möglich wäre es super, wenn es ein Root-Bild gibt. Das bedeutet, wenn noch nie irgendein Thumb mit der Maus überfahren wurde, dann zeigt es ein ganz anderes vergrößertes Bild.

P.P.S. Ich habe mittels CSS schon alles was hier beschrieben wurde realisiert, jedoch schaffe ich es nicht, das vergrößerte Bild mit einem URL zu hinterlegen. Wenn die Karotte vergrößert angezeigt wird möchte ich einen Verweis zu einem Bericht mit der Karotte, wenn das Haus vergrößert dargestellt wird, dann möchte ich einen Link-Verweis zu einem Bericht über das Haus usw.

 

[threadi]

Mit purem CSS lässt sich das eigentlich nur mittels aufeinander liegenden Ebenen realisieren. Um es wirklich flexibel nutzbar zu machen brauchst Du aber auch noch JavaScript. Per onmouseover-Eventhandler wird dann eine Funktion aufgerufen die das einzublendende Feld in "irgendeinem" Element einfügt oder eine Angabe dort ändert.

<a href="#" onmouseover="showPicBig('grafikgross.png');"><img src="grafikklein.png" alt=""></a>
<div id="gross"></div>

function showPicBig( bigpic ) {
 document.getElementById("gross").style.backgroundImage = bigpic;
}

#gross {
 height: 200px;
 width: 200px;
}

Ungetestetes Beispiel, aber man sollte erkennen worum es geht.

 

[damarv]

Hallo threadi,

danke für die Antwort. Ich habe mein einleitendes Thema ein wenig ergänzt.

Ich kenne mich mit JavaScript leider nicht aus, ich verstehe es nicht, akzeptiere aber jede Art (außer Flash) um dieses Problem zu lösen.

In deinem Beispiel lässt sich die große Grafik nicht darstellen, woran liegt es?

<script type="text/javascript" language="JavaScript">function showPicBig( bigpic ) {
document.getElementById("gross").style.backgroundImage = bigpic;
}
</script>


<style type="text/css">
#gross {
height: 200px;
width: 200px;
}
</style>


<a href="#" onmouseover="showPicBig('grafikgross.jpg');">
<img src="grafikklein.jpg" alt=""></a>
<div id="gross">jhkghkjgh</div>

Ich kann auch gerne meine HTML-Version zeigen, aber die kann leider nicht um den URL zu jedem vergrößerten Bild ergänzt werden. :cry:
Oder/Und: Ich kann auch auf Webseiten Verweisen, bei denen das so funktioniert wie oben beschrieben, leider lässt sich der Code hierfür nicht extrahieren.

 

[threadi]

Quellcode kann man eigentlich immer aus Webseiten heraus kopieren und für das eigene Web adaptieren (anpassen muss man ohnehin meist etwas). Ich glaube bei dir scheitert es eher am mangelnden JavaScript-Wissen ;) Aber das kann man sich ja auch noch aneignen ...

In deinem Beispiele sehe ich hier

document.getElementById("gross").style.backgroundI  mage = bigpic;

ein Leerzeichen zu viel. Korrekt wäre

document.getElementById("gross").style.backgroundImage = bigpic;

Außerdem wäre wichtig, dass der Pfad zur der vergrößerten Datei stimmt. Wie in meinem Beispiel einfach nur den Dateinamen zu nennen bringt ggfs. gar nicht. Evtl. muss man auch den Pfad zu der Datei angeben - je nachdem wie dein Web in Form von Dateien abgelegt ist.

Und wieso kann dein aktuelle HTML-Kodierung nicht ergänzt werden? Das geht eigentlich immer, außer man verwendet einen Homepage-Bauskasten ..

 

[damarv]

Hallo threadi,

danke für den Hinweis, auch ohne dem Leerzeichen funktionierts nicht.

Wenn du mein HTML-Code um den URL Verweis ergänzen möchtest, freue ich mich sehr, hier meine HTML-Version:

<IMG name=moni2 src="http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg" height=210>
 
  <IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg';"
  src="http://www.fotos-hochladen.net/uploads/bild1g8cdhrtwkj.jpg" width=60 height=45>
 
  <IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild2zmnoj03as1.jpg';"
  src="http://www.fotos-hochladen.net/uploads/bild2zmnoj03as1.jpg" width=60 height=45>
 
  <IMG class=pixx onMouseOver="moni2.src='http://www.fotos-hochladen.net/uploads/bild3l3r4psgymo.jpg';"
  src="http://www.fotos-hochladen.net/uploads/bild3l3r4psgymo.jpg" width=60 height=45>

 

[threadi]

Mit deinem HTML-Code müsste das eigentlich auch funktionieren, vorausgesetzt Du hast irgendwo in dem HTML-Dokument so ein img-Element stehen:

<img src="bild.jpg" alt="" name="moni2">

Da Du nicht deinen gesamten HTML-Code gepostet hast, weiß ich das ja nicht. Besser wäre übrigens immer ein Link zur der betreffenden Seite.

Hinweis: Nur von neuen Nutzern muss ab und zu ein Beitrag geprüft werden um Spam zu verhindern. Es dauert keinesfalls Tage bis (wir) Moderatoren Beiträge freischalten.

 

[damarv]

Mit deinem HTML-Code müsste das eigentlich auch funktionieren, vorausgesetzt Du hast irgendwo in dem HTML-Dokument so ein img-Element stehen:

Hallo, das img-Element "moni2" habe ich für diese Bildergruppe nur ein einziges mal verwendet. (für andere Bildergruppen habe ich es umbenannt in moni3 moni4 moni5 usw.)

Da Du nicht deinen gesamten HTML-Code gepostet hast, weiß ich das ja nicht. Besser wäre übrigens immer ein Link zur der betreffenden Seite.

Ich verstehe nicht ganz was du denn meinst... Das hier ist der komplette HTML Code... ich habe mir Mühe gegeben diesen für ein besseres Verständnis abzukürzen und auch Grafik-Verweise sind bereits in meinem Code integriert. Mehr gibt es nicht und der HTML-Code beweist ja auch, dass folgendes funktioniert:
1. Eine Root Abbildung wird angezeigt (zufällig die erste Thumb-Grafik)
2. Der Grafiktausch funktioniert + die jeweilige Grafik wird in das vergrößerte Fenster/Kasten (welcher seine Position nicht verändert) geladen
3. Die (letzte) vergrößerte Grafik bleibt auch dann bestehen, wenn die Maus von dem jeweiligen Thumb weicht

Ich kann auch jede Grafik mit einem URL hinterlegen, Das erste Thumb, das zweite Thumb usw.
Ich kann auch den vergrößerten Kasten mit einem URL hinterlegen.

Aber was ich nicht kann, ich verstehe es auch nicht und ich vermute, dass das nun folgende nicht mit meinem Beispiel realisierbar ist:
Zu jeder vergrößerten Abbildung eine zur Abbildung passende URL zu hinterlegen.

Beispiel: wird das eBay Logo vergrößert angezeigt, dann wird man mit Klick auf diese vergrößerte Abbildung auf die eBay Seite geleitet.
Wenn nun aber die zweite Grafik (z.B. das amazon-Logo) vergrößert dargestellt wird, dann wird man mit Klick auf diese vergrößerte Abbildung auf die Amazon Seite geleitet.

Das bedeutet, dass sich die URL ändert, wenn sich das vergrößerte Bild ändert.


Ist es denn tatsächlich möglich, meinen von mir veröffentlichten HTML-Code soweit zu verändern, dass dieser URL-Tausch (so wie hier und in Beitrag 1 ausführlich beschrieben) funktioniert.

Tut mir Leid, ich sitze seit 6 Stunden an diesem Problem, habe hunderte Google Treffer nach einer Lösung durchforstet (ohne Erfolg), habe viele viele viele Webseiten gesehen, die beweisen, dass dies funktioniert, aber ich scheitere...

 

[Tronjer]

Ist es denn tatsächlich möglich, meinen von mir veröffentlichten HTML-Code soweit zu verändern, dass dieser URL-Tausch (so wie hier und in Beitrag 1 ausführlich beschrieben) funktioniert.

Sicher geht das. Entweder durch dynamischen Austausch des Linkziels oder durch dessen Abschaltung und Weiterleitung per JS.

 

[damarv]

Hallo Tronjer,

Sicher geht das.

und

dynamischen Austausch des Linkziels

Das hört sich sehr optimistisch und auch sehr positiv an.

Funktioniert das ohne PHP? Falls ja, Wie geht das? Bitte verrate es mir...

Würdest du mir bitte ein Beispiel nennen, Verweis auf eine Seite auf der man das einfach aus dem Quellcode extrahieren kann.

Hab soeben ein paar Templates bei codecanyon gekauft und Stu Nicolls Seite durchforstet, wie zu erwarten OHNE Erfolg.

 

[Tronjer]

Das geht ganz ohne PHP und du hättest dazu auch nichts kaufen müssen.

Würdest du mir bitte ein Beispiel nennen, Verweis auf eine Seite auf der man das einfach aus dem Quellcode extrahieren kann.

Ich helfe dann, wenn ich das Gefühl habe, dass der Betreffende wirklich an der Materie interessiert und den notwendigen Lernaufwand dafür zu bringen bereit ist. Aber ich schreibe keinen Code für Leute, die nur copy & pasten wollen. Es sei denn, in Form eines offiziellen Auftrags aus der Jobbörse, oder die Aufgabe selber würde mich interessieren.

Aber um dir hier trotzdem Hilfestellung zu geben: Du benötigst zwei Funktionen, eine für mouseover und eine für mouseout. Um das zu realisieren würde sich bsw. jQuery hover() anbieten.

.hover() | jQuery API Documentation

Wenn du einen eigenen, funktionierenden Ansatz bringst, per hover() die Bilder zu wechseln, zeige ich dir, wie das mit den Linkzielen funktioniert.