PS: Gestern nacht war ich wohl nicht mehr ganz fitt und hab im EN Forum gepostet. Admin bitte wieder löschen. Danke.
So, es ist wieder so weit. Ich komm nicht weiter.
Möchte eine mouse-over bildvergrößerung machen:
der html code sieht in einem beispiel so aus:
<div id="menu">
<a class="p1" href="#nogo" title="thumbnail image"><img src="1.jpg" title="Thumbnail image" alt="Thumbnail image" />
<img class="large" src="2.jpg" title="Enlarged view of image" alt="Enlarged view of image" /></a>
</div>
der css code
#menu {position:relative; top:1px; left:1px; width:75px; background-color:#fff; z-index:100;}
#menu a.p1, #menu a.p1:visited {display:block; width:75px; height:75px; text-decoration:none; background:#fff; top:0; left:0; border:0;}
#menu a img {border:0;}
#menu a.p1:hover {text-decoration:none; background-color:#8c97a3; color:#000;}
#menu a .large {display:block; position:relative; width:0; height:0; border:0; top:0; left:0;}
#menu a.p1:hover .large {display:block; position:relative; top:-65px; left:150px; width:300px; height:300px; border:1px solid #ccc;}
Umsetzung:
Die product.tpl hab ich so angepasst:
[{if $size=='small'}]
<a id="test_pic_[{$testid}]" href="[{ $product->getLink() }]" class="picturelist"[{if $oView->noIndex() }] rel="nofollow"[{/if}]>
<img src="[{if $size=='big'}][{$product->getPictureUrl(1) }][{elseif $size=='thinest'}][{$product->getIconUrl() }][{else}][{ $product->getThumbnailUrl() }][{/if}]" alt="[{ $product->oxarticles__oxtitle->value|strip_tags }] [{ $product->oxarticles__oxvarselect->value|default:'' }]">
</a>
[{else}]
<a id="test_pic_[{$testid}]" href="[{ $product->getLink() }]" class="picture"[{if $oView->noIndex() }] rel="nofollow"[{/if}]>
<img src="[{if $size=='big'}][{$product->getPictureUrl(1) }][{elseif $size=='thinest'}][{$product->getIconUrl() }][{else}][{ $product->getThumbnailUrl() }][{/if}]" alt="[{ $product->oxarticles__oxtitle->value|strip_tags }] [{ $product->oxarticles__oxvarselect->value|default:'' }]">
<img class="large" scr="[{$product->getPictureUrl(1) }]" alt="[{ $product->oxarticles__oxtitle->value|strip_tags }] [{ $product->oxarticles__oxvarselect->value|default:'' }]" >
</a>
[{/if}]
Testweise habe ich die CSS wie folgt verändert:
#body .product .picture.large {display:block; position:relative; width:0; height:0; border:0; top:0; left:0;}
#body .product .picture.large a:hover {display:block; position:relative; top:-65px; left:150px; width:300px; height:300px; border:1px solid #ccc;}
In der Praxis wird nur der alt-text angezeigt. Im Firebug findet er das bild im bilderordner (1) jedoch nicht. warum, weiss ich leider nicht.
vielleicht bin ich auch komplett auf dem holzweg.
für hilfe bin ich natürlich wieder seeeehr dankbar. aber es eilt nicht…werd jetzt erst mal pause machen. hirn qualmt schon sehr!