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 |
|
|
Hallo beisammen,
eigentlich sagt der Titel schon fast alles
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?
so sähe ja das bild mit link aus ... nur den mouseover, dass sich das Hauptbild ändert bräuchte ich
Code: |
<a href="http://www.abc-color1.htm"><img src="color1.png"></a>
|
Danke schon mal. VG, Jan
|
|
|
|
|
pRiMUS
Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht:
|
Verfasst Fr 13.11.2015 09:47
Titel
|
|
|
ohne javascript ist dein vorhaben nicht möglich. mit reinem html sowieso nicht möglich.
|
|
|
|
|
Anzeige
|
|
|
JPredator
Threadersteller
Dabei seit: 22.12.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 13.11.2015 21:32
Titel
|
|
|
hm schade.
wollte das im WordPress auf einer Seite integrieren...
wie könnte ich es denn dann hinbekommen?
Schönes Wochenende, Jan
|
|
|
|
|
JPredator
Threadersteller
Dabei seit: 22.12.2008
Ort: -
Alter: -
Geschlecht: -
|
|
|
|
|
Rareer
Dabei seit: 22.06.2009
Ort: -
Alter: 35
Geschlecht:
|
Verfasst Di 17.11.2015 21:35
Titel
|
|
|
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 (nicht getestet)
|
|
|
|
|
JPredator
Threadersteller
Dabei seit: 22.12.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 18.11.2015 04:51
Titel
|
|
|
Danke für dein Feedback.
habe es mit meinem Bruder nun hinbekommen... hat ein weilchen gedauert aber funzt nun
ging mit jQuery. javascript wird in Wordpress ja verwendet. war nur fies die classen hin zu bekommen, weil alles ja dynamisch erstellt wird
Aber es geht auf einer eigenen seite ... nur natürlich nicht im shop-menü direkt integrierbar.
VG
|
|
|
|
|
|
|
|
Ähnliche Themen |
Übergeordneten Divcontainer ändern durch "mouseover"
Bildergalerie Mouseover andere Position & Mouseover Scroll
Mouseover
Mouseover Effect
SVG mit Mouseover und Anderem
Landkarte mit Mouseover
|
|