mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 07:29 Benutzername: Passwort: Auto-Login

Thema: Hauptbild mit mouseover von Farbbildern ändern vom 13.11.2015


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Hauptbild mit mouseover von Farbbildern ändern
Autor Nachricht
JPredator
Threadersteller

Dabei seit: 22.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 13.11.2015 06:07
Titel

Hauptbild mit mouseover von Farbbildern ändern

 Antworten mit Zitat Zum Seitenanfang
Hallo beisammen,

eigentlich sagt der Titel schon fast alles Lächel
Auf der linken Seite habe ich ein Hauptbild (400x400px) und darunter Flattertext
auf der rechten Seite habe ich 60 kleine Bilder. Da soll beim mouseover das Hauptbild immer gewechselt werden. Zudem soll jedes der kleinen Bilder beim drauf klicken einen eigenen href haben.

das Ganze in reinem HTML. Kann mir jemand den Code für so ein kleines Bild vielleicht verraten? Lächel
so sähe ja das bild mit link aus ... nur den mouseover, dass sich das Hauptbild ändert bräuchte ich *bäh*
Code:

<a href="http://www.abc-color1.htm"><img src="color1.png"></a>

Danke schon mal. VG, Jan
  View user's profile Private Nachricht senden
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst Fr 13.11.2015 09:47
Titel

Antworten mit Zitat Zum Seitenanfang
ohne javascript ist dein vorhaben nicht möglich. mit reinem html sowieso nicht möglich.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
JPredator
Threadersteller

Dabei seit: 22.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 13.11.2015 21:32
Titel

Antworten mit Zitat Zum Seitenanfang
hm schade.
wollte das im WordPress auf einer Seite integrieren...
wie könnte ich es denn dann hinbekommen?
Schönes Wochenende, Jan
  View user's profile Private Nachricht senden
JPredator
Threadersteller

Dabei seit: 22.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst So 15.11.2015 18:55
Titel

Antworten mit Zitat Zum Seitenanfang
im javascript bin ich halt null fit...
das hier geht in die ähnliche Richtung, oder?
http://www.mediengestalter.info/forum/10/uebergeordneten-divcontainer-aendern-durch-mouseover-130095-1.html
VG, Jan
  View user's profile Private Nachricht senden
Rareer

Dabei seit: 22.06.2009
Ort: -
Alter: 35
Geschlecht: Männlich
Verfasst Di 17.11.2015 21:35
Titel

Antworten mit Zitat Zum Seitenanfang
Ja also ohne Javascript funktioniert das nicht. Ich würde mir an deiner Stelle erstmal jQuery installieren, da man damit bereits viele Funktionen hat, die man nutzen könnte.

Dann wäre noch interessant zu wissen, ob die kleineren Bilder auf der rechten Seite auch wirklich kleiner sind oder nur kleiner dargestellt werden? Wird also bei jedem kleinen Bild eigentlich die volle Größe von 400×400px geladen?

Falls ja:
die kleinen Bilder benötigen alle eine Klasse z.B. "small-img" und werden dann im CSS kleiner dargesteltt:

Code:

.small-img{
width:150px;
height:auto!important;
float:left;
}


Im linken Bereich benötigen wir auch eine Klasse oder eine ID für das große Bild (z.B. #big-img)
Dann könnte man im Javascript (Wenn jQuery eingebunden ist) etwas schreiben, dass das "src" Attribut des großen Bildes mit dem des jeweiligen kleinen Bildes ersetzt wird:

Code:

$(document).ready(function(){
    $('.small-img').mouseover(function(){
         var src = $(this).attr('src');
         $('#big-img').attr('src') = src;
    });
});

Wenn ich jetzt nicht völlig daneben liege, müsste das klappen Grins (nicht getestet)
  View user's profile Private Nachricht senden
JPredator
Threadersteller

Dabei seit: 22.12.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 18.11.2015 04:51
Titel

Antworten mit Zitat Zum Seitenanfang
Danke für dein Feedback.
habe es mit meinem Bruder nun hinbekommen... hat ein weilchen gedauert aber funzt nun Lächel
ging mit jQuery. javascript wird in Wordpress ja verwendet. war nur fies die classen hin zu bekommen, weil alles ja dynamisch erstellt wird Menno!
Aber es geht auf einer eigenen seite ... nur natürlich nicht im shop-menü direkt integrierbar.
VG
  View user's profile Private Nachricht senden
 
Ähnliche Themen Übergeordneten Divcontainer ändern durch "mouseover"
Bildergalerie Mouseover andere Position & Mouseover Scroll
Mouseover
Mouseover Effect
SVG mit Mouseover und Anderem
Landkarte mit Mouseover
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB