...

View Full Version : rollover image position?



youandI
07-12-2007, 06:01 PM
Hi everyone! I am using some JS and CSS that loads a big image when you rollover the small image. This effect works when the small image is fully shown in the browser but if the browser is resized so the small image is cut off showing half the image then the bigger image doesnt adjust with the browser. I would like to know how to get the big image to adjust with the browsers height and width.

This is the JS I am using:

<script type="text/javascript">
function display(x,y,text,src) {
var brokenstring = src.split("_small");
var newstring = brokenstring[0]+'_big'+brokenstring[1];

var c = document.getElementById("capt");
c.innerHTML ="";
c.style.left = x + "px";
c.style.top = y + "px";

var myImage = document.createElement('img');
myImage.setAttribute('src',newstring);
myImage.setAttribute('alt','');
c.appendChild(myImage);

c.appendChild(document.createTextNode(text));
}

function showdiv(id) {
t = document.getElementById(id);
document.getElementById("capt").style.display = "block";
t.onmousemove = function(e) {
var ev = e || event,ox=20,oy=20;
display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
return false;
}
}
function hidediv() {
document.getElementById("capt").style.display = "none";
}

</script>

The big image loads in this div:

<div style="display: none; left: 437px; top: 32px;" id="capt"></div>

Does anyone know how to make the rollover image to reposition itself?

youandI
07-12-2007, 11:34 PM
please help

vwphillips
07-13-2007, 12:39 AM
function display(x,y,text,src) {
var brokenstring = src.split("_small");
var newstring = src.replace('_small','_big');

var c = document.getElementById("capt");
c.innerHTML ="";
c.style.left = x + "px";
c.style.top = y + "px";

var myImage = document.createElement('img');
myImage.setAttribute('src',src.replace('_small','_big'));
myImage.setAttribute('alt','');
myImage.setAttribute('id','myimage'); // given an id to resize on window resize
c.appendChild(myImage);

c.appendChild(document.createTextNode(text));
}
// call zxcResizeImage('myimage') on window resize easiest onresize="zxcResizeImage('myimage',4)" in the body tag
function zxcResizeImage(zxcimg,zxcfactor){
if (typeof(zxcimg)=='string') zxcimg=document.getElementById(zxcimg);
if (!zxcimg) return false;
zxcimg.width=zxcWWHS()[0]/zxcfactor;// I have used 4 but your choise
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}


I have show image size but technique can be used for position

youandI
07-13-2007, 02:13 AM
What should I put in the body tag? Can I change myimage to _big? I want every image that has the suffix _big at the end to display fully in the browser when the scale of the browser window is adjusted.

This is how the JS currently looks like:

<script type="text/javascript">
function display(x,y,text,src) {
var brokenstring = src.split("_small");
var newstring = src.replace('_small','_big');

var c = document.getElementById("capt");
c.innerHTML ="";
c.style.left = x + "px";
c.style.top = y + "px";

var myImage = document.createElement('img');
myImage.setAttribute('src',src.replace('_small','_big'));
myImage.setAttribute('alt','');
myImage.setAttribute('id','myimage'); // given an id to resize on window resize
c.appendChild(myImage);

c.appendChild(document.createTextNode(text));
}
// call zxcResizeImage('myimage') on window resize easiest onresize="zxcResizeImage('myimage',4)" in the body tag
function zxcResizeImage(zxcimg,zxcfactor){
if (typeof(zxcimg)=='string') zxcimg=document.getElementById(zxcimg);
if (!zxcimg) return false;
zxcimg.width=zxcWWHS()[0]/zxcfactor;// I have used 4 but your choise
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}
function showdiv(id) {
t = document.getElementById(id);
document.getElementById("capt").style.display = "block";
t.onmousemove = function(e) {
var ev = e || event,ox=20,oy=20;
display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
return false;
}
}
function hidediv() {
document.getElementById("capt").style.display = "none";
}

</script>

youandI
07-13-2007, 11:22 PM
what am i doing wrong? what should be in the body tag?

vwphillips
07-13-2007, 11:55 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script type="text/javascript">
function display(x,y,text,src) {
var brokenstring = src.split("_small");
var newstring = src.replace('_small','_big');

var c = document.getElementById("capt");
c.innerHTML ="";
c.style.left = x + "px";
c.style.top = y + "px";

var myImage = document.createElement('img');
myImage.setAttribute('src',src.replace('_small','_big'));
myImage.setAttribute('alt','');
myImage.setAttribute('id','myimage'); // given an id to resize on window resize
c.appendChild(myImage);

c.appendChild(document.createTextNode(text));
}
// call zxcResizeImage('myimage') on window resize easiest onresize="zxcResizeImage('myimage',4)" in the body tag
function zxcResizeImage(zxcimg,zxcfactor){
if (typeof(zxcimg)=='string') zxcimg=document.getElementById(zxcimg);
if (!zxcimg) return false;
zxcimg.width=zxcWWHS()[0]/zxcfactor;// I have used 4 but your choise
}

function zxcWWHS(){
if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTo p];
}

function showdiv(id) {
t = document.getElementById(id);
document.getElementById("capt").style.display = "block";
t.onmousemove = function(e) {
var ev = e || event,ox=20,oy=20;
display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
return false;
}
}
function hidediv() {
document.getElementById("capt").style.display = "none";
}

</script>
</head>

<body onresize="zxcResizeImage('img',2)">
<input type="button" name="" value="ReSize Image" onclick="zxcResizeImage('img',2)">
<img id="img" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif">
</body>

</html>

youandI
07-14-2007, 12:17 AM
but that is not what I want to do.. I uploaded your code to here:
http://www.newmedia.lincoln.ac.uk/jecgardner/vic.html

If you go to this URL:
http://www.newmedia.lincoln.ac.uk/jecgardner/
Rollover the screenshot in the first blog entry and you can see a bigger image loads. I would like the _big image to automatically adjust its position so all of the _big image can be seen in the browser instead of half of it being cut off below the browser window and the user has to scroll down to see it all.

youandI
07-15-2007, 01:44 PM
anyone know how to do this?

youandI
07-15-2007, 01:53 PM
Ok here is my site:
http://www.newmedia.lincoln.ac.uk/jecgardner/

When you rollover the screenshot in the first blog entry titled Conducting Code a bigger image appears.

Now look at this site:
http://www.skaffers.com/

When you rollover an image here and change the browser window size the image adjusts so it can be seen in its best position within the browser.

I would like my image to have the same effect as skaffers. So when you rollover the small image the big image puts itself into the best position to be seen in the browser.

I dont know how to do this. Please help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum