Bildbytes skript (onmouseover) sökes
1 svar · 199 visningar · startad av richardjoha
Kanske nåt i denna stilen då?
Omarbetat från exempel som finns här
http://www.dyn-web.com/dhtml/show-hide/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show/Hide Layers</title>
<style type="text/css">
body { font: 12px/1.3 Verdana, arial, helvetica, sans-serif }
h1 { font-size: 16px; }
h2 { font-size: 14px; }
a:link { color:#33c }
a:visited { color:#339 }
#lnks { position:absolute; left:10px; top:60px; width:100px }
/* Include id's for all your layers here, with commas between.
Set width, left and top */
#lyr1, #lyr2, #lyr3, #lyr4 {
position:absolute; visibility:hidden; z-index:100;
left:110px; top:60px; width:300px;
}
</style>
<script type="text/javascript">
/*************************************************************************
This code is from Dynamic Web Coding at http://www.dyn-web.com/
Copyright 2001-3 by Sharon Paine
See Terms of Use at http://www.dyn-web.com/bus/terms.html
regarding conditions under which you may use this code.
This notice must be retained in the code as is!
*************************************************************************/
// set these variables equal to the original top and left of layers
var orig_x=150; // layers' left
var orig_y=50; // layers' top
// onresize for ns4
var origWidth, origHeight;
if (document.layers) {
origWidth = window.innerWidth; origHeight = window.innerHeight;
window.onresize = function() { if (window.innerWidth != origWidth || window.innerHeight != origHeight) history.go(0); }
}
var cur_lyr; // holds id of currently visible layer
function swapLayers(id) {
if (cur_lyr) hideLayer(cur_lyr);
shiftLayerTo( id, orig_x, orig_y + getScrollY() );
showLayer(id);
cur_lyr = id;
}
function showLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.visibility = "visible";
}
function hideLayer(id) {
var lyr = getElemRefs(id);
if (lyr && lyr.css) lyr.css.visibility = "hidden";
}
function shiftLayerTo(id,x,y) {
var px = document.layers? 0: "px";
var lyr = getElemRefs(id);
if (lyr && lyr.css) {
lyr.css.top = y + px;
lyr.css.left = x + px;
}
}
function getElemRefs(id) {
var el = (document.getElementById)? document.getElementById(id): (document.all)? document.all[id]: (document.layers)? document.layers[id]: null;
if (el) el.css = (el.style)? el.style: el;
return el;
}
// credit to http://www.13thparallel.org for the following function
// returns amount of vertical scroll
function getScrollY() {
var sy = 0;
if (document.documentElement && document.documentElement.scrollTop)
sy = document.documentElement.scrollTop;
else if (document.body && document.body.scrollTop)
sy = document.body.scrollTop;
else if (window.pageYOffset)
sy = window.pageYOffset;
else if (window.scrollY)
sy = window.scrollY;
return sy;
}
</script>
</head>
<body onload="swapLayers('lyr1')">
<div id="lnks">
<!-- Links for showing/hiding can include status bar message,
as first link demonstrates. -->
<a href="javascript://" onmouseover="swapLayers('lyr2'); return false" onmouseover="window.status='Show Intro layer'; return true" onmouseout="window.status=''"><img src=001.jpg width=50 height=50></a>
<br><br>
<a href="javascript://" onmouseover="swapLayers('lyr3'); return false"><img src=002.jpg width=50 height=50 ></a>
<br><br>
<a href="javascript://" onmouseover="swapLayers('lyr4'); return false"><img src=003.jpg width=50 height=50 ></a>
</div>
<div id="lyr1">
</div>
<div id="lyr2">
<img src=001.jpg >
</div>
<div id="lyr3">
<img src=002.jpg >
</div>
<div id="lyr4">
<img src=003.jpg >
</div>
</body>
</html>