Hallo

Ich habe eine HTML Foto Gallery erstellt. Jetzt bräuchte ich ein PHP script welches wenn man auf die Bilder geht mit dem Mauscursor das die automatisch grösser werden und wenn man wieder weg geht wieder kleiner werden.

gibt es so was ? wenn ja kann mir jemand ein script schicken?

Was hat das mit PHP zutun? Das kannst du mit javascript machen im "onmouseover" - Event.

kannst du mir das erklären wie ?

Jo kann ich, also hier nen Beispielscript:<script language="javascript">

var iSizeWidth;
var iSizeHeight;
var iPercent = 50;

function zoomIn(obj)
{
iSizeWidth = obj.width;
iSizeHeight = obj.height;

obj.width = (obj.width*100)/(100-iPercent);
obj.height = (obj.height*100)/(100-iPercent);
}

function zoomOut(obj)
{
obj.width = iSizeWidth;
obj.height = iSizeHeight;
}

</script>
Dann müsstest du noch Deine Bilder mit 2 Events erweitern,
sprich "onmouseover" & "onmouseout" (die Events sollten für sich sprechen):<img src="baby.jpg" width="50" height="70" onmouseover="zoomIn(this)" onmouseout="zoomOut(this)" /> Könnte man jetzt noch animieren, also schön slizen, aber das kannst Du dann ggf. selber machen :p

Noch fragen?
Hinweis: Das geht so nur im Mozilla und im Firefox. Ich versuch es Dir noch IE tauglich zu machen.

So im IE läuft es jetzt auch ;)
Ich hab die Variable iPercent eingefügt, da stellst Du ein um wieviel Prozent sich das Bild vergrößern soll, dabei wird bezug auf die width & height Eigenschaft im IMG-Tag genommen.

vielen dank !

so ich habe eine gallery nun erstellt. aber jetzt verziehen die bilder so enorm kann man die irgendwie verankern ß???

Hast du das ganze online? Wenn ja, dann gib mal den link oder zeig nen Screenshot.

*move* 2 html/js

http://img508.imageshack.us/my.php?image=wskoch24qf.jpg

http://img508.imageshack.us/my.php?image=wskoch11zx.jpg

so

ich möchte das wenn ein bild grösser wird die anderen fest verankert bleiben geht das ?

zieh dir den code aus dem online bsp. keine lust den jetz zu formatieren.. :P online zu sehen (http://www.im-po.de/php_res/img_onmouseover_zoom/index.html)

danke für das script aber ich hab noch ein problem jetzt krieg ich nur drei bilder in eine reihe die nächsten reihe bekomm ich nicht angezeigt

was ist da jetzt schon wieder kaputt


2. ich brauche ein suchfunktionsscript für diese bilder seitenübergreifend am besten

wo liegt das problem? klick nochmal auf das bsp. das online ist..

suchfunktion? stehen die bilder irgendwo in einer datenbank oder hast du einen ordner, in dem die ganzen bilder abgelegt sind? das kannst du nur leider nicht mit javascript machen, da müsstest du auf php umsteigen. ich weiss allerdings nicht in wie weit du dich mit php auskennst.

Also ich habe alle dateien in einem ordner jpg bilder und html seiten

jetzt brauch ich nen script welches bilder sucht nach dem titel

ne das script brauch ich net mehr. Habs so hingekriegt

ich hab aber noch nen prob mit der gallery. Wenn man auf die Bilder draufgeht zittern die so

www.web-im-bild.de (htpp://www.web-im-bild.de)

kann da einer helfen ???

bitte is dringend

Mit Firefox zittert gar nix.

geh mal mit dem Mauszeiger auf pic 3,4,5 in meiner foto gallery 1 die zittern wie die bastarde vor der schlacht

HILFE!!!!!!!!!!!!!!!!!!!!!!!!

HILFE!!!!!!!!!!!!!!!!!!!!!!!!
So ein Post ist aber nicht wirklich dein Ernst ? Oder etwa doch :rolleyes:
ich hab aber noch nen prob mit der gallery. Wenn man auf die Bilder draufgeht zittern die so
Wenn dein Link wenigstens funzen würde :confused:

Gruss

tobi

sry so richtiger link hier (http://www.web-im-bild.de)

kann mir niemand nen tip geben wie ich das beheben kann ???

Hast du dir schonmal die Frage gestellt, wieso das bei den Bilder so zittert? Da das Bild immer rechts vom Mauszeiger positioniert wird und im mousemove nicht mit bewegt wird, kann es vorkommen, das der Mauszeiger eben über das vergrößerte Bild kommt und an diesem Punkt greift das onmouseout Event und das veranlasst, dass das vergrößerte Bild ausgeblendet wird. Da es ausgeblendet wird und der Mauszeiger wohlmöglich immernoch über einem Bild ist, das vergrößert werden soll, tritt das onmouseover Event in Kraft und vergrößert das Bild. Und das wiederholt sich und wiederholt sich und wiederholt sich und ... Da der Lösungsansatz von mir kam und das eigentlich für dich nur ein Denkanstoß sein sollte, könntest du mir hier jetzt keine Vorwürfe machen. Da ich aber so nett bin, geb ich dir hier noch einen weiteren Lösungsansatz für dein Problem. Aber das hättest du mit ein bisschen Debugging auch hinbekommen. So genug bla bla, hier der Lösungsansatz:
var iSizeWidth;
var iSizeHeight;
var iPercent = 50;
var obj_zoom = null;

function zoomIn(e, obj)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
e = (typeof(e) != 'object') ? window.event : e;

var iNewWidth = (obj.width*100)/(100-iPercent);
var iNewHeight = (obj.height*100)/(100-iPercent);

obj_zoom.innerHTML = "<img src=\""+obj.src+"\" height=\""+iNewHeight+"\" width=\""+iNewWidth+"\">";

obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ?
(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ?
(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
obj_zoom.style.display = '';
}
}

function zoomOut(obj)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
obj_zoom.style.display = 'none';
bMouseMove = false;
}
}

function zoomMove(e)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
e = (typeof(e) != 'object') ? window.event : e;
obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ?
(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ?
(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
}
}
Da jetzt eine neue Funktion hinzugekommen ist, brauchen wir auch ein neues Event und das sieht dann im IMG-TAG wie folgt aus:<img src="baby.jpg" width="50" height="70"
onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" />

Jeder hat das Recht, dumm zu sein.
Einige missbrauchen dieses Recht
aber leider ständig!

Das trifft wohl auf mich zu. Danke

Aber es geht nicht.

1. Muss ich die div tags beibehalten?

2. Den bisherigen Javascript Quellcode beibehalten oder nur durch den neuen ersetzen

Jeder hat das Recht, dumm zu sein.
Einige missbrauchen dieses Recht
aber leider ständig!

Das trifft wohl auf mich zu. Danke Das ist meine Signatur, findest du in jedem Post von mir, aber wenn du dich damit identifizierst, dann wird das wohl so sein :P
Aber es geht nicht. Das kann ich so nicht stehen lassen. Es geht wohl, sonst hätte ich es ja nicht hier gepostet!
1. Muss ich die div tags beibehalten?

2. Den bisherigen Javascript Quellcode beibehalten oder nur durch den neuen ersetzen
Zu 1.) Nein du musst die nicht beibehalten, lediglich das div tag in dem die vergrößerung angezeigt werden soll, musst du beibehalten.. Die Bilder kannst du auch in einer Tabelle darstellen, das ist ja deine Sache..

Zu 2.) Alten JS Code durch den neuen ersetzen und das Event in den img tags nicht vergessen..

was mache ich falsch ich hab den JS Code ersetzt durch den neuen die img tags richtig bearbeitet ... ka ? lol

<html>
<head>
<meta http-equiv="Content-Language" content="german,DE">
<meta http-equiv="Content-Type" content="text/html/Images; charset=windows-1252">
<title>Familie Koch-Ein Fotoalbum</title>
<script language="javascript">

var iSizeWidth;
var iSizeHeight;
var iPercent = 50;
var obj_zoom = null;

function zoomIn(e, obj)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
e = (typeof(e) != 'object') ? window.event : e;

var iNewWidth = (obj.width*100)/(100-iPercent);
var iNewHeight = (obj.height*100)/(100-iPercent);

obj_zoom.innerHTML = "<img src=\""+obj.src+"\" height=\""+iNewHeight+"\" width=\""+iNewWidth+"\">";

obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ?
(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ?
(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
obj_zoom.style.display = '';
}
}

function zoomOut(obj)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
obj_zoom.style.display = 'none';
bMouseMove = false;
}
}

function zoomMove(e)
{
if ( obj_zoom != null && typeof(obj_zoom) == 'object' )
{
e = (typeof(e) != 'object') ? window.event : e;
obj_zoom.style.left = (typeof(e.pageX) != 'undefined') ?
(e.pageX+5)+'px' : (e.x+document.body.scrollLeft+5)+'px';
obj_zoom.style.top = (typeof(e.pageY) != 'undefined') ?
(e.pageY+5)+'px' : (e.y+document.body.scrollTop+5)+'px';
}
}
</script>
</head>

<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" rightmargin="o" bottommargin="0" bgcolor="#FFFFFF" link="white" alink="white" vlink="white">

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/black.gif">
<tr>
<td width="100%"><font size="3" color="White">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Menü:&nbsp;&nbsp;<A HREF="impressum.html">Impressum</A>&nbsp;&nbsp;<A HREF="info.html">Informationen</A>&nbsp;&nbsp;<A HREF="mitglied.html">Login</A>&nbsp;&nbsp;<A HREF="kontakt.php">Kontakt</A>&nbsp;&nbsp;<A HREF="index.html">Startseite</A>&nbsp;&nbsp;</font></td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/midbkg.gif">
<tr>
<td width="1%">
<p align="left"><img border="0" src="images/sitenav.gif" width="172" height="112"></td>
<td width="50%" valign="top">
<p align="right"><img border="0" src="images/logo.gif" width="211" height="62"><br>
<a href="mailto:koch.rpk@t-online.de"><img border="0" src="images/contact.gif" width="211" height="50"></td></A>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="1%" background="images/sidebkg.gif" valign="top"><img border="0" src="images/sidespacer.gif" width="141" height="11"><br>
<a href="foto1.html"><img border="0" src="images/foto1.gif" width="141" height="30"><br></A>
<a href="foto1.1.html"><img border="0" src="images/foto1.1.gif" width="141" height="30"><br></A>
<a href="foto1.2.html"><img border="0" src="images/foto1.2.gif" width="141" height="30"><br></A>
<a href="foto2.html"><img border="0" src="images/foto2.gif" width="141" height="30"><br></A>
<a href="foto2.1.html"><img border="0" src="images/foto2.1.gif" width="141" height="30"><br></A>
<a href="foto2.2.html"><img border="0" src="images/foto2.2.gif" width="141" height="30"><br></A>
<a href="foto3.html"><img border="0" src="images/foto3.gif" width="141" height="30">
<p><font size="2">&nbsp; </font></td>
<td width="99%" valign="top">
<p style="margin-left: 20">&nbsp;</p>
<p style="margin-left: 20"><font face="Arial" color="#605890" size="4">Foto Gallery 1
</font></p>
<p style="margin-left: 20"><font face="Arial" size="2">Hier geht es um Autos. Bewegen sie den Cursor auf ein Bild um es zu vergrößern
</font></p>
<p style="margin-left: 20"><font face="Arial" size="2">&nbsp;</font></p>
<p style="margin-left: 20"><font face="Arial" size="4" color="#605890">
</font></p>
<p style="margin-left: 20"><font face="Arial" size="2"><div id="div_zoom" style="position:absolute; display:none; z-index:100000;">
</div>

<div>
<div style="position:static; margin-left:5px; float:left;">
&nbsp;&nbsp;&nbsp;<a href="bmw325ia.html"><img src="bmw325ia.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>

<div style="position:static; margin-left:5px; float:left;">
<a href="bmw325iaklein.html"><img src="bmw325iaklein.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>

<div style="position:static; float:left;">
&nbsp;<a href="bmw325iamobile.html"><img src="bmw325iamobile.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>

<div style="position:static; float:left;">
&nbsp;<a href="dscf0048.html"><img src="dscf0048.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<div style="position:static; float:left;">
&nbsp;<a href="dscf0058.html"><img src="dscf0058.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<div style="position:static; float:left;">
&nbsp;<a href="dscf0087.html"><img src="dscf0087.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<div style="position:static; float:left;">
&nbsp;<a href="cockpit.html"><img src="cockpit.jpg" width="100" height="80" onmousemove="zoomMove(event)" onmouseover="zoomIn(event, this)" onmouseout="zoomOut(this)" /></A>
</div>
<BR><BR><BR><BR><BR>
</div>

</font></p>
<p style="margin-left: 20"><font face="Arial" size="1">&nbsp;</font></p>
<p style="margin-left: 20"><font face="Arial" size="1">&nbsp;</font></p>
<p style="margin-left: 20" align="center"><font size="1" face="Arial">©
COPYRIGHT 2006 ALL RIGHTS RESERVED Pierre Friedrichsmeier</font></td>
</tr>
</table>

<table border="0" width="100%" cellspacing="0" cellpadding="0" background="images/black.gif">
<tr>
<td width="100%"><font size="1">&nbsp;&nbsp;&nbsp;&nbsp; </font></td>
</tr>
</table>

</body>

</html>

http://www.php-resource.de/forum/showthread.php?s=&threadid=50455

sry das hilft net weil es sich nicht um php sondern reines javascript handelt

bitte kann jemand sich das mal ansehen????

Original geschrieben von pmf2
was mache ich falsch ich hab den JS Code ersetzt durch den neuen die img tags richtig bearbeitet ... ka ? lol Das kann ich dir nicht sagen, weil ich ehrlich gesagt keine Luste habe, mir deinen Quellcode durchzulesen. Ich stell dir die änderungen online und dann kannst du dir daraus deinen Code zusammenbasteln.
Link: hier... (http://www.im-po.de/php_res/img_onmouseover_zoom/)
Das Copyright liegt ja nicht mehr zu 100% bei dir, also kannste das auch von deiner Seite nehmen..
Zu deinem lol: es stellt sich nur die Frage, was hier so lol ist.

@ reallife: Würde gerne das Script auf meiner Seite verwenden. Ist das kostenlos, kann ich das nutzen?

Original geschrieben von archie
@ reallife: Würde gerne das Script auf meiner Seite verwenden. Ist das kostenlos, kann ich das nutzen? Tu was du nicht lassen kannst ;)
Man könnte das ganze natürlich noch verfeinern, in dem man Ein- & Ausblendeffekte einbaut - aber wenn ich dir das machen sollte, würde ich schon eine Kleinigkeit erwarten :p

greatz
rl