Hover effekt in Produkten?

[shark]

ich möchte einen hover effekt haben in produkten.
so dass ich mit der maus drüber gehe und ein anderes bild also rollover zu sehen ist.
wie ändere ich das in der css?

mfg

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

[Matt]

Gar nicht. Außer du willst immer das gleiche Bild beim hover haben.

[DefCon2k]

Servus,

sofern du das Cloud-Zoom-Modul verbaut hast, kannst du dies bewerkstelligen (hatte ich vor kurzem mal gepostet), allerdings nicht mit CSS, sondern durch eine kleine Änderung (ein Wort) im Javascript; Schau mal hier: MODUL: Cloud Zoom als Alternative zu MagicZoom

Gruß Tobi

[shark]

Gar nicht. Außer du willst immer das gleiche Bild beim hover haben.

es soll ja im Produktmenü das selbe rollover bild sein
ist das nicht möglich?

[shark]

Servus,

sofern du das Cloud-Zoom-Modul verbaut hast, kannst du dies bewerkstelligen (hatte ich vor kurzem mal gepostet), allerdings nicht mit CSS, sondern durch eine kleine Änderung (ein Wort) im Javascript; Schau mal hier: MODUL: Cloud Zoom als Alternative zu MagicZoom

Gruß Tobi

es soll ja nur hier im bild eine andere farbe oder bild wenn ich mit der maus drüber gehe

[Matt]

Das ist doch jetzt aber die Navigation und kein Produktbild...

[wandbilderxxl]

Also die klasse heisst standardmäßig "ul#categorymenu li.level1 a" danach musst du in deiner css datei suchen. Dort kannst Du dann die farben anpassen oder auch ein hintergrundbild einsetzten.

Code: CSS  [Auswählen]

ul#categorymenu li.level1 a
{
background: #EEEEEE;
background: url('images/bild1.png');
}
ul#categorymenu li.level1 a:hover
{
background: #999999;
background: url('images/bild1.png');
}

[designbude]

Hallo,

ich würde gerne einen MouseOver Effekt auf den Produktfotos in der "product_listing" bzw. "product_listing_includes" einbauen.

Es funktioniert soweit nur das 2. Produktfoto aus der "product_info" wird irgendwie nicht übernommen.

----
Bisheriger Code:
<img class="unveil" src="{$tpl_path}css/images/loading.gif"
data-src="{$module_data.PRODUCTS_IMAGE}"
alt="{$module_data.PRODUCTS_NAME|onlytext}" title="{$module_data.PRODUCTS_NAME|onlytext}"
onmouseover="src='{$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"thumbnail_images"}'" onmouseout="src='{$module_data.PRODUCTS_IMAGE}'" /></a>
----

Dieser Inhalt wird wahrscheinlich nicht korrekt sein.. {$more_images_data.PRODUCTS_IMAGE|replace:"info_images":"thumbnail_images"}

Hat eventuell einer eine Idee was ich da ändern müsste 

Falls sich wer die Zeit kostbare Zeit nimmt - Vielen lieben Dank im voraus!

[hpzeller]

Teste mal folgenden Code.

Code: XML  [Auswählen]

<img class="unveil" src="{$tpl_path}css/images/loading.gif" data-src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" title="{$module_data.PRODUCTS_NAME|onlytext}" onmouseover="src='{$module_data.PRODUCTS_IMAGE|replace:'_0':'_1'}'" onmouseout="src='{$module_data.PRODUCTS_IMAGE}'" />

Obiges funktioniert nicht wenn man z.B. die Namen der Produktbilder via CSV in die Datenbank importiert und die Bildnamen nicht die Form "Produkt-ID_0" für das erste Bild bzw. "Produkt-ID_1" für das zweite Bild haben.

Gruss
Hasnpeter

[voodoopupp]

Hi Hanspeter,

also grundsätzlich kann ich dir bestätigen, dass der Code funktioniert.

Probleme gibt es aber, sobald es kein zweites Bild gibt (product_id_1), dann wird nach kurzer "Ladezeit" ein leeres Bild angezeigt, da eben nicht vorhanden
[ Für Gäste sind keine Dateianhänge sichtbar ]

Viele Grüße
Dominik

[designbude]

Vielen lieben Dank Hanspeter!

Das funktioniert exakt so wie ich es mir gedacht hatte

Und vielen lieben Dank für den sehr konstruktiven Hinweise Dominik!

    

[hpzeller]

Um den Hinweis von Dominik aufzugreifen, man könnte das "alt" Attribut dazu verwenden um dem Sitebesucher  mitzuteilen, dass es kein zweites Bild gibt.

Beispiel:

Code: XML  [Auswählen]

<img class="unveil" src="{$tpl_path}css/images/loading.gif" data-src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" title="{$module_data.PRODUCTS_NAME|onlytext}" onmouseover="src='{$module_data.PRODUCTS_IMAGE|replace:'_0':'_1'}'; alt='No second image available'" onmouseout="src='{$module_data.PRODUCTS_IMAGE}'" style="color: red; font-size: 20px;" />

Gruss
Hanspeter

[designbude]

Auch noch eine sehr gute Idee Hanspeter!

Werde Deinen tollen Vorschlag auf jeden Fall mit aufnehmen auch wenn ich es aktuell bei der Kategorie nicht benötige da ich eine zweite "product_info_v2.html" dafür angelegt habe und in der Kategorie sind (bei mir) immer zwei Bilder vorhanden.

Hoffe der Beitrag hilft noch weiteren!

Vielen Dank nochmal für die Hilfe

[hpzeller]

Hier noch eine Variante mit ein bisschen mehr JavaScript. Bei dieser Variante geschieht, wenn kein zweites Bild vorhanden ist, gar nichts, in diesem Fall wird also nicht gehovert.

Code: XML  [Auswählen]

<img class="unveil" src="{$tpl_path}css/images/loading.gif" data-src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME|onlytext}" title="{$module_data.PRODUCTS_NAME|onlytext}" onmouseover="(function(){ let http = new XMLHttpRequest(); http.open('HEAD', '{$module_data.PRODUCTS_IMAGE|replace:'_0':'_1'}', false); http.send(); if (http.status == 200){ src='{$module_data.PRODUCTS_IMAGE|replace:'_0':'_1'}'; } })();" onmouseout="src='{$module_data.PRODUCTS_IMAGE}'" />

Gruss
Hanspeter

[noRiddle (revilonetz)]

@voodoopupp
Off-topic: Hast du mit Absicht die Komprimierung für HTML und JS nicht aktiviert ?

Gruß,
noRiddle