Anderes Artikelbild bei Mouseover

[möCöm]

Hallo liebe Community,
ich bin auf der Suche nach einem Modul. Wenn man auf der Shopseite stöbert und mit der Maus über ein Produktbild (thumbnail) fährt, das ein anderes Bild kommt. Sozusagen ein klassischer mouseover.
Zum Beispiel zeigt die Kategorie Textilien an und wenn man mit der Maus raufgeht, kommt die Rückseite des Textils.
Hier ein Beispiel:

http://www.mogulclothing.de/herren/oberteile/sweatshirts.html

Gibt es sowas oder hat jemand eine gute Lösung?
Viele Grüße

Linkback: https://www.modified-shop.org/forum/index.php?topic=33558.0

[möCöm]

Ich denke das interessiert ziemlich viele User! Oder ist das technisch gar nicht möglich?

[Fakrae]

Natürlich ist das möglich - du brauchst dafür Javascript. Da jQuery bereits geladen ist sollte das kein großer Act sein:
https://www.google.de/search?q=jquery+onmouseover+replace+image

[noRiddle (revilonetz)]

Das geht mit reinem CSS, ohne Javascript !
Die Bilder mittels posistion:absolute übereinander legen (umgebender Container muß auch positioniert sein, also z.B. position:relative haben).
Jedem Bild eine Klasse vergeben.
Das darüberliegende Bild mittels visibility:hidden unsichtbar machen und bei :hover auf den umgebenden Container visible machen.

Gruß,
noRiddle

[Fakrae]

Ach stimmt ja, die Wunder der css-Entwicklung Entschuldigung

[noRiddle (revilonetz)]

Das ist aber keine CSS-Entwicklung, das geht eigtl. schon immer (abgesehen vom alten IE6 der :hover nur auf a-tags zuließ, was aber hier ja sogar der Fall wäre).

Gruß,
noRiddle

[möCöm]

Hallo, danke! Aber wir kann man das denn mit Modified vereinbaren? Die Artikelbilder sind ja nur über die Artikel optionen über Artikelbild: 1, Artikelbild: 2, usw steuerbar.
Kann man nicht einstellen das immer das zweite Artikelbild bei einem Mouseover erscheint?

LG

[möCöm]

Bitte um Antwort. Gerne auch Firmen, die bei der Umsetzung watt verdienen
Es muss gemacht werden

[karsta.de]

Ist eigentlich nicht so kompliziert. Eigene Template-Vorlage für die Produktinfo mit Bildwechsel erstellen und für den Bildcode folgendes schreiben:

Code: PHP  [Auswählen]

{if $PRODUCTS_IMAGE!=''}
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}">
<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" onmouseover="document.wechselbild.src='{$PRODUCTS_IMAGE_1}';"
onmouseout="document.wechselbild.src='{$PRODUCTS_IMAGE}';"  id="wechselbild" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>
{/if}

edit:
Allerdings, habe gerade gesehen funktioniert so nur im Firefox. Muß jetzt leider weg. Schau es mir nachher noch mal an.

[karsta.de]

So jetzt aber. Für den Bildcode folgendes schreiben:

Code: PHP  [Auswählen]

{if $PRODUCTS_IMAGE!=''}
<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}">
<img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" class="productimage" onmouseover="src='{$PRODUCTS_IMAGE_1}'" onmouseout="src='{$PRODUCTS_IMAGE}'" />{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>
{/if}
 

Getestet in Firefox, IE, GC.

[noRiddle (revilonetz)]

Wie ich bereits sagte ist dafür kein Javascript nötig und man sollte auch darauf verzichten wenn es nicht nötig ist.
Das geht allein mit CSS, wie ich weiter oben erklärt habe.
Das zweite Bild, also {$PRODUCTS_IMAGE_1} muß über dem eigentlichen Bild liegen und mittels der CSS-Eigenschaft visibility und :hover sichtbar gemacht werden.
Das eigtl. Bild liegt dann unter dem sichtbar gemachten und ist bei :hover nur deshalb nicht sichtbar weil das {$PRODUCTS_IMAGE_1} eben darüber liegt.

Gruß,
noRiddle

[möCöm]

Danke für die Antwort ihr zwei.
noRiddle, kannst du mir da vllt. den Code und die Stelle geben, wo das in css editiert werden muss?
Kann deine Antwort nachvollziehen aber leider nicht umsetzten
Liebe Grüße und nochmal vielen Dank

[möCöm]

Ich denke hier muss das irgendwo eingebaut werden? Das ist mein css code

Code: CSS  [Auswählen]

.productPreview{float:left; margin:5px; height:400px; padding:1px; width:180px; border:1px solid #fff}
.productPreview:hover{float:left; margin:5px; height:400px; padding:1px; width:180px; border:1px solid #b5b5b5; background:url(images/kat_list_bg.png); background-position:bottom; background-repeat:repeat-x}
.productPreview_card{float:left; margin:3px; height:400px; padding:1px; width:180x; border:1px solid #fff}
.productPreview_card:hover{float:left; margin:3px; height:380px; padding:1px; width:18px; border:1px solid #b5b5b5; background:url(images/kat_list_bg.png); background-position:bottom; background-repeat:repeat-x}
.productPreview_also{ float:left; margin:5px 5px 0; min-height:290px; padding:3px; width:170px}
.productPreviewContent{vertical-align:top; text-align:center; margin:8px 0 0 0}

.productPreviewContent h2{padding:0; margin:0px 0px 0px 0px}
.productPreviewContent h2 a{font-size:14px; font-weight:100; outline:none; line-height:18px; display:block; height:40px;}
.productPreviewImage{vertical-align:top; padding:3px 15px 0px 0px}
.productPreviewImage img{border:solid 0px #999; width:180px;}
.productPreviewContent .price{font-size:12px; font-weight:bold; padding:0; margin:0}
.productPreviewContent .taxandshippinginfo{font-size:12px; font-weight:normal; color:#999; padding:0; margin:0}
.productPreviewContent .vpe{font-size:11px; font-weight:normal; color:#999; padding:0; margin:0}
.productPreviewContent .shippingtime{font-size:11px; font-weight:normal; color:#999; padding:0; margin:0}
.productPreviewContent .stockimage{margin:0; padding:0}
.productPreviewContent .stockimagetext{margin:0; padding:0; font-size:11px; font-weight:normal; color:#999}
.productPreviewContent .productOldPrice{font-size:12px; color:#f00}
.boxbest .productOldPrice{font-size:12px; font-weight:bold; color:#b5b5b5; padding:0 0 0 20px}
.productPreviewContent .taxandshippinginfo a{font-size:11px; font-weight:bold; color:#999; text-decoration:underline; outline:none}
.productPreview .productPreviewContent .productOldPrice{ color:#F00;}
.productPreviewContent small { display:none;}
.price_info .productOldPrice { color:#202020;}
.price_block { display:block; height:40px;}
special { color:#F00; font-weight:bold}
del{ color:#202020;}
#productinfowrap{display:table; width:100%}
#productinfoimages{float:left; background-color:#EDEDED; text-align:center; width:340px; padding:10px; margin:0px 10px 10px 0px; border:solid 1px #999}

[p3e]

Nachteil von der Lösung von noRiddle ist, dass grundsätzlich beide Grafikdateien geladen werden, egal ob der Shopbesucher das zweite Bild ansieht oder nicht. Je nachdem wie groß deine Produktbilder sind, ist das nicht unerheblich und das Laden der Seite dauert doppelt so lange. Dafür funktioniert es aber auch bei Kunden, die JavaScript deaktiviert haben.
Bei der Lösung von kgd wird die Abbildung der zweiten Ansicht wirklich nur für den Fall nachgeladen, wenn der Shopbesucher mit der Maus über das Artikelbild fährt.

Ist jetzt Deine Ansichtssache, was du bevorzugst. Im Fall von kgd's Lösung könntest du per <noscript> einen Hinweis einblenden, falls JavaScript deaktiviert ist, so das der Besucher zumindest mitbekommt, dass er bei aktiviertem JS mehr Funktionen zur Verfügung hat.

[karsta.de]

Jetzt mal ganz ehrlich, hat von euch einer schon mal versucht den Shop ohne Javascript laufen zu lassen. (Das würde mich echt interessieren.)
Ich denke da würde es mehr Probleme geben als ein unwichtiges nicht wechselndes Bild.