✔ Mouseover von klein nach groß?

Status
Nicht offen für weitere Antworten.
solala123

solala123

Erfahrenes Mitglied
Hallo zusammen,
ich wünsch erst mal allen ein gesundes neues Jahr.
So nun zu meiner Frage:
bei mouseover wird immer das kleinere Bild als "Vorlage verwendet.
Kann man auch als Grundbild ein kleines nehmen und wenn man mit der Maus darauf fährt, öffnet sich eingroßes Bild. ?
Vielen Dank
mfg
Rainer
 
Hallo,
dir natürlich auch ein frohes Neues ;)

Natürlich geht das. Dazu müsstest du nur ein :hover für die jeweilige Klasse definieren. Wenn es mehrere (dynamisch) Bilder sind würde ich das ganze direkt über das style-tag machen.
Wenn das Bild andere Bereiche überlappen soll, musst du meines wissens nach mit dem z-index arbeiten. ;)

EDIT:
http://www.homepage-faqs.de/index.php?site=bilder-groesser-bei-mouseover
sollte dir auch helfen ;)

lg
 
Zuletzt bearbeitet:
Hallo Mike,
der Link für
Simple slide show
ist genau das was ich möchte, nur wo kann man es herbekommen, bei meinen Versuchen kam ich immer nur auf kostenpflichtige Seiten !
gibt es sowas nicht umsonst?
mfg
Rainer
 
solala123 hat gesagt.:
Hallo Mike,
der Link für
Simple slide show
ist genau das was ich möchte, nur wo kann man es herbekommen, bei meinen Versuchen kam ich immer nur auf kostenpflichtige Seiten !
gibt es sowas nicht umsonst?
mfg
Rainer
Zum Vergrößern anklicken....

Verstehe nicht wo dein Problem ist? Kupfer das doch eifach von der Seite ab ;)
Da ist doch nen funktionieredes Beispiel.

Einfach mal nen bischen durch den Code klickern...

EDIT: Und Copyright beachten ;)

lg
 
Hallo Rainer,

werf mal einen Blick in den Seitenquelltext - darin findest du den benötigten CSS- u. HTML-Code ;)

Der Autor stellt nicht all seine Beispiele zum direkten Download bereit, da muß man dann schon mal etwas Hand anlegen, und sich die Passagen aus dem Quellcode herauskopieren:

Code: 
<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/slides.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {padding:20px; background:#222; width:600px; height:330px; text-align:left;}
.photo h1 {font-size:14px; font-weight:normal; color:#fc0; margin:0 0 0 5px; padding:0;}
.photo ul {list-style:none; padding:0; margin:0; width:216px; background:#333; border:1px solid #666; position:relative; height:144px;}
.photo ul li {display:inline; width:24px; height:24px; float:left; margin:6px;}
.photo ul li a {display:block; width:24px; height:24px; cursor:default; background:url(pics/arrow.gif) no-repeat; text-decoration:none;}
.photo ul li a b {display:none;}
.photo ul li a img {display:block; width:22px; height:22px; border:1px solid #666; border-top-color:#ccc;}

.photo ul li a:hover {white-space:normal;position:relative;}

.photo ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; border-color:#fc0;}
.photo ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; border-color:#fc0;}

.photo ul li a:active, .photo ul li a:focus {position:static; outline:0;}

.photo ul li a:focus.vert img, .photo ul li a:active.vert img {background-color:#000; position:absolute; left:260px; top:0; width:240px; height:320px; border:1px solid #fc0; padding:5px 45px;}
.photo ul li a:focus.hor img, .photo ul li a:active.hor img {background-color:#000; position:absolute; left:260px; top:0; width:320px; height:240px; border:1px solid #fc0; padding:45px 5px;}
.photo ul li a:focus b, .photo ul li a:active b {display:block; position:absolute; width:204px; height:150px; border:1px solid #666; top:165px; left:0; color:#ddd; font-weight:normal; padding:6px;}
</style>
Code: 
<h2>Simple slideshow</h2>

<h3>26th February 2007</h3>


<div class="photo">
<ul>
<li><a href="#nogo1" class="hor"><img src="pics/pic_1h.jpg" alt="" title="" /><b>Snow capped mountains</b></a></li>
<li><a href="#nogo2" class="vert"><img src="pics/pic_1v.jpg" alt="" title="" /><b>Model</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_2h.jpg" alt="" title="" /><b>A fly</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_2v.jpg" alt="" title="" /><b>An eagle</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_3h.jpg" alt="" title="" /><b>Tubes of paint</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_3v.jpg" alt="" title="" /><b>Flowers on a table</b></a></li>

<li><a href="#nogo" class="hor"><img src="pics/pic_4h.jpg" alt="" title="" /><b>A clown</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_4v.jpg" alt="" title="" /><b>Painted lady</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_5h.jpg" alt="" title="" /><b>Boat on a river</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_5v.jpg" alt="" title="" /><b>Underneath the arches</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_6h.jpg" alt="" title="" /><b>Stormy weather</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_6v.jpg" alt="" title="" /><b>A fisheye view</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_7v.jpg" alt="" title="" /><b>A misty morning</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_7h.jpg" alt="" title="" /><b>Rays of light in the forest</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_8v.jpg" alt="" title="" /><b>A tree lined avenue</b></a></li>

<li><a href="#nogo" class="vert"><img src="pics/pic_9v.jpg" alt="" title="" /><b>A portrait in black and white</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_8h.jpg" alt="" title="" /><b>Forest walk</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_10v.jpg" alt="" title="" /><b>An old barn</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_9h.jpg" alt="" title="" /><b>Cold and frosty morning</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_10h.jpg" alt="" title="" /><b>Blue flower</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_11v.jpg" alt="" title="" /><b>White feather</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_11h.jpg" alt="" title="" /><b>White flowers on green leaves</b></a></li>
<li><a href="#nogo" class="vert"><img src="pics/pic_12v.jpg" alt="" title="" /><b>Green and blue with a touch of white</b></a></li>
<li><a href="#nogo" class="hor"><img src="pics/pic_12h.jpg" alt="" title="" /><b>Ripe tomatoes</b></a></li>

</ul>
<h1>CSS <i>p</i>lay Photo Gallery</h1>
</div>


lg Maik

P.S. nicht Mike ;)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück