zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Mouseover-Effekt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.09.2016, 15:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.09.2016
Beiträge: 1
PeterS befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.10.2016, 11:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bild resizable und mit MouseOver Effekt csigg CSS 1 12.11.2010 11:18
MouseOver Effekt funzt nicht KrasseMama CSS 7 20.07.2008 15:09
CSS - Mouseover - Effekt mit Grafiken erzielen fuhrheiner CSS 13 11.10.2005 19:44
PHP Menü mit MouseOver Effekt Flo01 CSS 11 14.04.2005 17:45
MouseOver Effekt + Link auf die extreme Tour YUMYUM-75 CSS 1 15.11.2004 22:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:27 Uhr.