XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Mouseover-Effekt (http://xhtmlforum.de/showthread.php?t=73004)

PeterS 27.09.2016 15:27

Mouseover-Effekt
 
Moin. Ich muss mich entschuldigen, aber ich bin absoluter Neuling in diesem Gebiet und komme nicht weiter.

Ich betreibe eine Website und möchte gern eine Mouseover-Effekt einsetzen, um Bilder besser dar zu stellen. In meinem Fall muss ein Bild rangezoomt werden, sobald ich mit der Maus drüber fahre. Ich habe schon mehrere HTML-Codes ausprobiert, hatte aber bisher keinen Erfolg. Kann mir jemand sagen wo der Fehler liegt bzw. ob ich vllt. sogar auf dem Holzweg bin mit meinem Code ?

Code:

<style type="text/css">

.zoomimage-container {position: relative;}
 .zoomimage-std {}
 .zoomimage-zoom {visibility: hidden; position: absolute; z-index: 1; top: 0px; left: 0px;}
 </style>


<div class="zoomimage-container">

<a class="zoomimage-std" href="I:\H1\Bilder\04"><img" src="\images\intra\news\1.jpg" border="0" width="594" height="298" style="border-width: 0px;"

alt="" onmouseover="javascript:document.getElementById
('zoomimage1').style.visibility='visible'" /></a> <a href="I:\H1\Bilder\04"
class="zoomimage-zoom" id="zoomimage1" "
onmouseout="javascript:document.getElementById
('zoomimage1').style.visibility='hidden'" name="zoomimage1"><img

src="http:\\XXX.XXX.XXX.XXX\htdocs\Joomla\images\intra\news\2.png" alt="" /></a>
</div>


cloned 03.10.2016 11:17

Ich empfehle dir hier, das rein mit CSS zu realisieren:

https://css-tricks.com/snippets/css/...it-transition/

Mehr als diesen CSS-Code brauchst du da nicht wirklich. Natürlich musst du den "grow"-Klassennamen durch deinen eigenen Klassennamen, bzw. CSS-Selektor ersetzen. Das kann natürlich auch ul li img{ ... } (oder was du möchtest) sein.

scale(1.1) heißt eine Skalierung auf das 1.1-fache, bei einer größeren Skalierung einfach den Wert anpassen: scale(2) verdoppelt zB dein Bild.


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:06 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023