Forstørre billede ved onmouseover
hej,Jeg har fundet nedenfor viste script på nettet og synes den er rigtig smart (og også fået den til at virke med egne billeder)......Men men men
Jeg kan bare ikke se, hvor jeg kan ændre størrelsen på billedet der popper op. Nogen der kan sige mig det?
En anden ting, den forringer billedet MEGET, når den bliver forstørret op, kan den laves sådan, at jeg henter et andet billede måske med extension Billedenavn_popup.jpg eller er der en anden måde at gøre dette på, så det ikke ser forfærdelig ud?
mvh
simsen :-)
Script:
<script language="javascript" type="text/javascript">
/**********************************************/
/* EventHandling */
/**********************************************/
var slideId = -1;
var isAminating = false;
var useSlide = true;
var supportedBrowser = isSupported();
function isSupported()
{
if (typeof document.documentElement.style.maxHeight != "undefined")
{
return true;
}
return false;
}
function slideIn()
{
var layer = document.getElementById('theImg');
if(layer.height < 418 )
{
layer.height += 10;
}
if(layer.width < 559)
{
layer.width += 100;
} // 418 X 559
if( (layer.height >= 418 ) && (layer.width >= 559) )
{
clearInterval(slideId);
isAnimating = false;
}
}
function OnImgMouseOver( ev , caller)
{
if(!supportedBrowser)
{
return;
}
if(!isAminating)
{
var elm = caller;
isAminating = true;
var parts = new Array();
var layer = document.getElementById('PopUpLayer');
if( layer == null )
{
WriteLayers();
layer = document.getElementById('PopUpLayer');
}
parts = elm.getAttribute('src').split('/');
layer.innerHTML = '<div style="position: relative;margin:0;padding:0;left: 5px; top: 5px;background-color: black;"> <div style="background-color: silver;"> <div style="border: 1px solid black;position: relative;left: -5px;top: -5px;"><img id="theImg" height="0" width="0" src=' + elm.getAttribute('src').replace('92/69',"559/418") + ' ></div></div> </div>';
layer.style.top = NewfindPosY( elm ) + 'px';
layer.style.left = NewfindPosX( elm ) + elm.width + 10 + 'px';
layer.style.visibility = 'visible';
slideId = setInterval(slideIn,1);
}
}
function OnImgMouseOut(ev)
{
if(!supportedBrowser)
{
return;
}
var layer = document.getElementById('PopUpLayer');
if( layer == null )
{
return;
}
layer.style.visibility = 'hidden';
clearInterval(slideId);
isAminating = false;
}
/**********************************************/
/* positioning of popuplayer */
/**********************************************/
function NewfindPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function NewfindPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function WriteLayers()
{
var body = document.getElementsByTagName('body')[0];
var layer = document.createElement('div');
layer.id = 'PopUpLayer';
layer.name = 'PopUpLayer';
layer.style.visibility = 'hidden';
layer.style.position = 'absolute';
body.appendChild(layer);
}
addLoadEvent(initComparison);
</script>
<img alt="" src="Images/Mar18_09.jpg" style="width:200px;" onmouseover="OnImgMouseOver(event,this);" onmouseout="OnImgMouseOut(event,this);" />
