✔ Maus über Bild, Bild größer anzeigen

T

thehasso

Erfahrenes Mitglied
Hallo,


ich bin gerade auf der suche, wie mann ein bild das man auf der Website hat, beim drüber gehen mit der maus größer angezeigt, bekommt. Sprich ich hab einen Online status von Usern, die sich auf meiner Website befinden. Die Bilder sind aber alle im kleinformat. Deswegen ist es sinnvoll dass wenn der user beim Bild drüber geht, das bild etwas größer angezeigt wird.


Wüsste jemand, wie ich da vor gehen muss?

Mein start war so:

PHP: 
    <?php $pic = htmlentities($searchEntry['bild']);
		  $intID = htmlentities($searchEntry['intID']);
	if($pic == NULL) echo "<a href='/fffk/Templates/nacheinloggen/profil.php?id=$intID' target='mainFrame'> <img src='img/no_image.jpg' width='115' height='125' alt='bild' />"; 
	else 

// BILD IN KLEIN
	echo " <a href='/fffk/Templates/nacheinloggen/profil.php?id=$intID' target='_blank'><img src='img/$pic' width='115' height='125' alt='pic' />" ?>
    
// BILD IN GROß
   <? 
   echo " <a href='/fffk/Templates/nacheinloggen/profil.php?id=$intID' target='_blank'><img src='img/$pic' width='200' height='300' alt='pic' />"
   ?>

Brauche nur etwas, was durch den drüber geht, das Bild in groß anzeigt.



LG
 
Du machst das mit Javascript, oder mit CSS.
Bei Javascript arbeitest du mit dem onmouseover und onmouseout Event und bei CSS mit hover. Beides geht.
Javascript Beispiel:
HTML: 
<html>
<head>
<script type="text/javascript" language="javascript">
function large(el,num)
{
if(num==1){
el.style.width="600px";
}
if(num==0){
el.style.width="200px";
}
}
</script>
</head>
<body>
<img src="bild1.jpg" onmouseover="large(this,1);" onmouseout="large(this,0);"/>
</body>
</html>

Oder mit CSS:
HTML: 
<html>
<head>
<style type="text/css">
	.bild{width:50px;}
	.bild:hover{width:200px;}
</style>
</head>
<body>
<img src="bild1.jpg" class="bild"/>
</body>
</html>
 
Zuletzt bearbeitet:
Hi,

da dein Vorhaben mit einer serverseitigen Scriptsprache wie PHP technisch nicht möglich ist, bring ich den Thread im Javascript-Forum unter, denn dieser "Event" läuft, wie von Scipio skizziert, clientseitig ab.

mfg Maik
 
Hallo Liebe Community,

ich würde gerne das in Javascript verwenden aber statt das Bild einfach zu strecken würde ich gerne das Originalbild anzeigen.
geht das auch irgendwie mit Javascript den Pfad habe ich das ist kein Problem.

LG Peper
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück