af ballegaarden » tors okt 16, 2008 12:32
Nu fandt jeg tilfældigt lige det jeg lige ville have, men kan du hjælpe mig til at lave om på de værdier der hedder x+15 og y+15.
Det virker fint når det lille billede, der blivet forstørret ligger opp og til venstre på siden, men de billeder der ligger nederst og helt ude til højre, kan ikke ses.
Det må kunne laves så den er variabel, alt efter hvor de små billeder ligger.
Håber du kan hjælpe, så bliver jeg meget glad.
<html>
<head>
<script type="text/javascript">
function ShowBigImage(image){
var BigImage = document.getElementById("BigImage");
BigImage.innerHTML = "<img src='"+image+"'>";
}
function MoveBigImage(x, y){
var BigImage = document.getElementById("BigImage");
BigImage.style.display = "block";
BigImage.style.left = (x+15) + "px";
BigImage.style.top = (y+15) + "px";
}
function HideBigImage(){
document.getElementById("BigImage").style.display = "none";
}
</script>
</head>
<body>
<center>
<h1>Udskift Billede Ved MouseOver</h1>
<div id="BigImage" style="border:1px solid #000;width:100px;height:100px;display:none;position:absolute;">
</div>
<br /><br />
<img src="billede1.png" onMouseOver="ShowBigImage('billede1.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede2.png" onMouseOver="ShowBigImage('billede2.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede3.png" onMouseOver="ShowBigImage('billede3.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede4.png" onMouseOver="ShowBigImage('billede4.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede5.png" onMouseOver="ShowBigImage('billede5.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
</center>
</body>
</html>
Nu fandt jeg tilfældigt lige det jeg lige ville have, men kan du hjælpe mig til at lave om på de værdier der hedder x+15 og y+15.
Det virker fint når det lille billede, der blivet forstørret ligger opp og til venstre på siden, men de billeder der ligger nederst og helt ude til højre, kan ikke ses.
Det må kunne laves så den er variabel, alt efter hvor de små billeder ligger.
Håber du kan hjælpe, så bliver jeg meget glad.
<html>
<head>
<script type="text/javascript">
function ShowBigImage(image){
var BigImage = document.getElementById("BigImage");
BigImage.innerHTML = "<img src='"+image+"'>";
}
function MoveBigImage(x, y){
var BigImage = document.getElementById("BigImage");
BigImage.style.display = "block";
BigImage.style.left = (x+15) + "px";
BigImage.style.top = (y+15) + "px";
}
function HideBigImage(){
document.getElementById("BigImage").style.display = "none";
}
</script>
</head>
<body>
<center>
<h1>Udskift Billede Ved MouseOver</h1>
<div id="BigImage" style="border:1px solid #000;width:100px;height:100px;display:none;position:absolute;">
</div>
<br /><br />
<img src="billede1.png" onMouseOver="ShowBigImage('billede1.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede2.png" onMouseOver="ShowBigImage('billede2.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede3.png" onMouseOver="ShowBigImage('billede3.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede4.png" onMouseOver="ShowBigImage('billede4.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
<img src="billede5.png" onMouseOver="ShowBigImage('billede5.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
</center>
</body>
</html>
