Menu
Ok I know I know… this should be like 4 threads, but its really 1 big problem in my case.
Explination:
I am working on a “hover for larger image” system similiar to tool tips using JavaScript, it crawls the document in a specific area (id=content) looking for img tags and assigns listener events (mouseover,mousemove,mouseout), after which point it looks for a lowsrc tag (populated with link to larger image, I know its not standards compliant) if that attribute is present it then proceeds to preload the image into a new Image() object while displaying a small looping image to signify loading. Upon Image.onload it swaps out the src tags of the image object into the dummy image holder and displays the image to the user.. or atleast thats the rough idea.
Problem:
In firefox everything seems to work alright, I have noticed however that while creating an output console using a popup and document.write commands the script literally makes hundreds if not thousands of requests for the image from a remote source. I also noticed that in firefox the image request is usually instantly countered with the image in the cache, and once cache is disabled you get a command that hangs. This hanging happens with IE every single attempt. I am not sure how exactly to prevent this, I tried putting a switch on a global variable and then switching it out with the .onload event. I was unsuccessful thus far. The strange part about this is sometimes the images load, but only if they ARE NOT in the cache, which is the issues that got me side tracked from the switch issues mentioned above. If the images do load, and indeed become cached because of that, they WILL NOT load again unless there is a page refresh… this is only in IE, I’m very puzzled… and this issue wasn’t an issue until I introduced the image.onload handler.
(on a side note, all the images in the content div will be sequentually numbered in the id tag via the server side upon out)
example: (view source for full code) [url]http://cableorganizer.com/chad/img3.html
Code:
[CODE]
function compileImages(){
var foundImages = document.getElementById(“content”).getElementsByTagName(“img”);
for(var i=1; i<foundImages.length+1; i++){
document.getElementById(“image”+i).onmouseover = Locate;
document.getElementById(“image”+i).onmousemove = Locate;
document.getElementById(“image”+i).onmouseout = HideHover;
}
}
function HideHover(){
document.getElementById(“hoverState”).style.display = “none”;
document.getElementById(“hoverImage”).src = “http://cableorganizer.com/pm5/upsales/loop.gif”;
}
function Locate(e){
if (this.lowsrc){
var hoverImage = document.getElementById(“hoverImage”);
if (!getNewImage){
var getNewImage = new Image();
}
getNewImage.src = this.lowsrc;
getNewImage.onload = function(){
hoverImage.src = getNewImage.src;
getNewImage.src = “”;
}
document.getElementById(“hoverState”).style.display = “block”;
var posx=0,posy=0;
if(e==null) e=window.event;
if(e.pageX || e.pageY){
posx=e.pageX; posy=e.pageY;
}
else if(e.clientX || e.clientY){
if(document.documentElement.scrollTop){
posx=e.clientX+document.documentElement.scrollLeft;
posy=e.clientY+document.documentElement.scrollTop;
}
else{
posx=e.clientX+document.body.scrollLeft;
posy=e.clientY+document.body.scrollTop;
}
}
document.getElementById(“hoverState”).style.top=(posy+15)+”px”;
document.getElementById(“hoverState”).style.left=(posx+15)+”px”;
var winHeight = windowHeight();
var winWidth = windowWidth();
if (document.documentElement.scrollTop){
winHeight = winHeight + document.documentElement.scrollTop;
}else{
winHeight = winHeight + document.body.scrollTop;
}
if(document.documentElement.scrollTop){
var verticalTestBoundary = (document.getElementById(“hoverImage”).height + document.documentElement.scrollTop) + posy;
}else{
var verticalTestBoundary = (document.getElementById(“hoverImage”).height + 10) + posy;
}
//alert(verticalTestBoundary + “n” + winHeight);
if(verticalTestBoundary > winHeight){
var overLap = (verticalTestBoundary – winHeight);
posy = (posy-overLap)-30;
document.getElementById(“hoverState”).style.top=(posy+15)+”px”;
}
}
}
function windowWidth(){
if (window.innerWidth){
if (document.body.offsetWidth){
if (window.innerWidth!=document.body.offsetWidth)
return document.body.offsetWidth;
}
return (window.innerWidth);
}
if (document.documentElement.clientWidth)
return document.documentElement.clientWidth;
if (document.body.clientWidth)
return document.body.clientWidth;
}
function windowHeight(){
if (window.innerHeight){
if (document.body.offsetHeight){
if (window.innerHeight!=document.body.offsetHeight)
return document.body.offsetHeight;
}
return (window.innerHeight);
}
if (document.documentElement.clientHeight)
return document.documentElement.clientHeight;
if (document.body.clientHeight)
return document.body.clientHeight;
}
[code=html]
<body>
<div id=”content”>
<img src=”http://www.google.com/intl/en/images/logo.gif” id=”image1″><br><br>
<img width=”100″ src=”http://www.i-pets.com/pics/cats/cat7.jpg” id=”image2″ lowsrc=”http://www.i-pets.com/pics/cats/cat7.jpg”><br><br>
<img src=”http://www.google.com/intl/en/images/logo.gif” id=”image3″ ><br><br>
<img width=”100″ src=”http://www.google.com/intl/en/images/logo.gif” id=”image4″ lowsrc=”http://www.google.com/intl/en/images/logo.gif”><br><br>
<img src=”http://www.google.com/intl/en/images/logo.gif” id=”image5″><br><br>
<img width=”100″ src=”http://www.i-pets.com/pics/cats/cat7.jpg” id=”image6″ lowsrc=”http://www.i-pets.com/pics/cats/cat7.jpg”><br><br>
<img width=”100″ src=”http://www.caribbean-cake-event.com/img/cake2a.jpg” id=”image7″ lowsrc=”http://www.caribbean-cake-event.com/img/cake2a.jpg”><br><br>
<img width=”100″ src=”http://www.esagase.com/car/upfile/car-small1.jpg” id=”image8″ lowsrc=”http://www.esagase.com/car/upfile/car-small1.jpg”><br><br>
<img width=”100″ src=”http://www.i-pets.com/pics/cats/cat7.jpg” id=”image9″ lowsrc=”http://www.i-pets.com/pics/cats/cat7.jpg”><br><br>
<img width=”100″ src=”http://www.i-pets.com/pics/cats/cat7.jpg” id=”image10″ lowsrc=”http://www.i-pets.com/pics/dogs/dog22.jpg”><br><br>
<img width=”100″ src=”http://www.snoozer-dog-beds.com/rbluelg.jpg” id=”image11″ lowsrc=”http://www.i-pets.com/pics/dogs/dog1.jpg”><br><br>
</div>
<br><br>
<br><br>
<br><br><br>
<br><br><br>
<br><br><br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br><br><br>
<br>
<br><br>
<div id=”hoverState”><img id=”hoverImage” src=”http://cableorganizer.com/pm5/upsales/loop.gif”></div>
<script language=”JavaScript”>
compileImages();
</script>
</body>
if you guys have anymore questions, feel free to ask them and I’ll answer them to the best of my ability.
please note this is my first semi-complicated javascript project and my coding regiments/methods are not the most defined.