Lupeneffekt für Bilder

Y

YU-Koda

Mitglied
Ich suche etwas. Und zwar einen Lupen oder vergrösserungseffekt. Ich will bezwecken, dass wenn ich auf ein Bild klicke, dass es beim rüberfahrem mit der Maus sich so eine Art Popup erscheint, auf dem das Bild vergrössert dargestellt wird. Beim Wegbewegen der Maus soll das kleine Fenster (weiss net ob man dazu noch popup sagen kann) sich automatisch schliessen. Was dabei zu beachten ist, der effekt sollte mit IE, als auch mit Mozilla funktionieren. Kann mir da wer weiterhelfen?

Ich hoffe bloss, dass ihr jetzt mein Anliegen auch verstanden habt *g*
 
Wow, das ist cool. Der Code dafür wäre nicht schlecht. Ist aber noch nicht genau das was ich suche.

Du ich hab mich eigentlich hierher gewandt, weil ich nicht selber weiss, wie ich das nennen sollen. Ich meinte eher, wenn ich z.b mit der Maus drüberfahre, dass sich eine Art Popup (aber innerhalb des Browsers) mit dem vergrösserten Bild öffnet und beim Verlassen des Mauszeigers wieder schliesst. Hmm, sag ja, weiss selber nicht, wie ich das formulieren soll ;)
 
Du kannst dein Vorhaben auch per onmouseover realisieren. Dann musst du Ebenen verwenden. Diese sind frei positionierbar für dich als Webmaster aber nicht für den Anwender. Die "Fenster" mit dem größeren Bild gehen dann bei dem Überfahren des kleineren Bildes automatisch auf und schließen sich wieder, wenn du nicht mehr auf dem kleinen Bild bist.
Leider konnte ich den Code nicht dahinbiegen, dass dieser auch unter Mozilla funktioniert. Hab ihn selbst nur irgendwo "geklaut".
Aber ich denke, dass dir da dann definitiv hier noch einge weitehelfen können, die mit Sicherheit viel mehr Ahnung von JavaScript haben als ich.
HTML: 
<html>
<head>
<SCRIPT language=JavaScript>
function LayerMaster(Location,VisString) {
 //SET-UP INVERSES
 if (VisString == 'hidden') { var InverseVisString = 'visible'; }
 if (VisString == 'visible') { var InverseVisString = 'hidden'; }
 //DETECT BROWSER
 var browser = navigator.appName;
 //NETSCAPE NAVIGATOR VERSION
 if (browser == 'Netscape') {
 if (document.layers != null) {
 	document.layers[Location].visibility = VisString; 
	document.layers['original'].visibility = InverseVisString; }
 }
 //INTERNET EXPLORER VERSION
 if (browser == 'Microsoft Internet Explorer') {
 if (document.all != null) { 
	document.all[Location].style.visibility = VisString; 
	document.all['original'].style.visibility = InverseVisString; }
 }
}
</SCRIPT>

<STYLE type=text/css>A {
	COLOR: red; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10pt; TEXT-DECORATION: none
}
A:hover {
	COLOR: blue; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 10pt; TEXT-DECORATION: none
}
</STYLE>

<META content="MSHTML 5.00.2314.1000" name=GENERATOR>
</HEAD>
<BODY>
<A href="//" onmouseout="LayerMaster('link2','hidden')" onmouseover="LayerMaster('link2','visible')">
<img src="klein.gif" width="60" height="30">
</A><BR>

<DIV id=link2 
style="HEIGHT: 150px; LEFT: 165px; POSITION: absolute; TOP: 27px; VISIBILITY: hidden; WIDTH: 300px">
<img src="gross.gif" width="200" height="169">
 </DIV>

<DIV id=original 
style="HEIGHT: 60px; LEFT: 85px; POSITION: absolute; TOP: 80px; VISIBILITY: visible; WIDTH: 500px"></DIV>
<p>&nbsp;</p>

</BODY></HTML>

Hoffe ich konnte dir ein wenig helfen.
Bis denne, ehantnor
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück