Member Avatar for Casperjames

So.... Pretty strange thing is happening to me. I have a scrolling thumbnail marquee which on click pops up an image box div and replaces the thumbnail with a larger image, sets the src, then re-replaces the thumbnail. This works perfectly on my local machine but when uploaded to the website host the images just break.

function Large(obj)
    {
        
        var imgbox=document.getElementById("imgbox");
        imgbox.style.visibility='visible';
        var img = document.createElement("img");
        obj.src = obj.src.replace("Thumbnail", "");
        img.src=obj.src;
        
        obj.src = obj.src.replace(".", "Thumbnail.");
  
        if(img.addEventListener){
            img.addEventListener('mouseout',Out,false);
        } else {
            img.attachEvent('onmouseout',Out);
        }             
        imgbox.innerHTML='';
        imgbox.appendChild(img);      
    }

Not the greatest code in the world, but I am just at a loss because like I said it works perfectly on my local machine.

Edited by Casperjames because: n/a
  • 3 Contributors
  • 5 Replies
  • 172 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Casperjames
Member Avatar for Pnorq 
obj.src = obj.src.replace("Thumbnail", "");
        
        obj.src = obj.src.replace(".", "Thumbnail.");

Is this what you want to do? Note the "dots."

Hard to tell what's going on without more code...

Member Avatar for Casperjames

I think it is correct because when rendered local it works flawlessly.

My image paths for the marquee are "<img src="Images/imagenameThumbnail.png" onClick="Large(this)" onmouseout="Out(this)"/>".

The Large() function is posted above, onClick causes the image box to show, and removes "Thumbnail" from the string, then sets the image source to the larger image.

I've tried to move the re-replace to the Out function which actually let the image open on the host but then breaks on mouse out. Again, this works well locally but breaks when uploaded to the host.

Below is my updated code.

function Large(obj)
    {
        
        var imgbox=document.getElementById("imgbox");
        imgbox.style.visibility='visible';
        var img = document.createElement("img");
        obj.src = obj.src.replace("Thumbnail", "");
        img.src=obj.src;
        
        //obj.src = obj.src.replace(".", "Thumbnail.");
  
        if(img.addEventListener){
            img.addEventListener('mouseout',Out,false);
        } else {
            img.attachEvent('onmouseout',Out);
        }             
        imgbox.innerHTML='';
        imgbox.appendChild(img);      
    }
    
    function Out(obj)
    {         
        document.getElementById("imgbox").style.visibility='hidden';
        var img = document.createElement("img");
        obj.src = obj.src.replace(".", "Thumbnail.");
        img.src=obj.src;
    }
Member Avatar for Pnorq

Ah OK, I see what you're doing with the src attribute. Allow me to pick a nit ;) : I suggest you code that a little differently for clarity, like replace("imagenameThumbnail.png", "imagename.png") and vice versa.
That'll be easier to maintain.

If I understand your post, is it the new <img> created in Out() that is missing the mouseout behavior?
Also have you run this in the browser debugger and stepped through the code?

Member Avatar for Taywin

Hmm... Your event attached is incorrect. You try to attach Out() function but did not attach parameter to the function. As a result, it is ambiguous. I am not really sure here because I forgot how to use this closure function... Anyway, could you try...

if(img.addEventListener){
     img.addEventListener('mouseout', function(evt) { Out(this) },false);
  }
  else {
     img.attachEvent('onmouseout',function(evt) { Out(this) });
  }
Member Avatar for Casperjames

Found the problem after consulting with my Sensei. Pnorq, you were right in suggesting the (".") had something to do with it.

Locally the image path was "file:///C:/Documents%20and%20Settings/Caleb/My%20Documents/HostName/Images/SagittariusTatThumbnail.png".

Uploaded to the server the new file path post re-replace turned into "http://hostnamethumbnailthumbnailthumbnail.com/Images/sagittariusTat.png"

I am changing the line obj.src = obj.src.replace(".", "Thumbnail.");
to
obj.src = obj.src.replace("!~!", "Thumbnail");

Thanks for looking at my thread guys!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.