[update: Problem Solved] JavaScript Help Needed: Can You Solve My JavaScript Problem?

by 5 replies
6
I've created a Javascript that pops open a new window showing a full sized image when someone clicks a thumbnail image, and it closes automatically when they move the cursor off the thumbnail. It's a great way to preview an image without leaving the page and without having to manually close the pop up window.

The problem is this: I'd like to have the JavaScript grab the alt text from whichever image is clicked and display it under the image in the pop up window. I can do it using an ID with the image (Get ElementById) but since you can only use one unique ID per page, I'd have to create a separate entry in the script for each ID. That's not practical for what I have in mind.

I'm using the document.write method to create the pop-up window code. Can anyone tell me how to take the alt text from a thumbnail on the main page and have it printed out under the full sized image in the pop-up window?

If you can you'll be my hero for the day!
#programming #javascript #puzzle
  • Say this is your function that called when someone click on a thumbnail:

    function popupcreator(...){
    ...
    var thumbnailImageAltText = this.getAttribute('alt');
    // this will get the alt text of clicked thumbnail image
    ...
    }

    You can also get a certain image's alt text, selecting it with its ID:
    getElementById('thumbnailImageID').getAttribute('a lt');

    HTH
    • [ 1 ] Thanks
    • [1] reply
    • By the way, I don't think that will work for what I want to do because each thumbnail would need an unique ID. I'd have to create a different script for each thumbnail to do that, because it the ID would need to be programmed into the script. I could accomplish the same thing by creating an HTML page for each thumbnail, but that's what I'm trying to get away from.

      Thanks.

      Anyone have any ideas?
  • Thanks HTH. I probably should have mentioned I know very little about JavaScript. I can hack stuff together based on what I've seen but I really don't know what I'm doing, which makes troubleshooting really hard.

    When I tried adding what you gave me it either broke the pop-up or didn't print the alt text. Probably my fault and not your code. Here's the code I have in an external .js file:

    Code:
    function open_new_window(image) 
{
new_window = open("","hoverwindow","width=420,height=480,left=0,top=0");
new_window.document.open();
new_window.document.write("<html><head><title>Viewer</title></head>");
new_window.document.write("<body style='text-align:center'>");
new_window.document.write("<img src='../images/" + image + "'>");
new_window.document.write("</body></html>");
// close the document
new_window.document.close(); 
}

function close_window() 
{
new_window.close();
}
    How would I add your code so it works?
  • Hi Dennis,

    As looking your function, I concluded that your links are something like this:



    Based on that, you have to change your link structure to this to get it work:



    And your function to this:




    As you can see, we're writing image file names into title of A(nchor) tags and passing this keyword with the function. Bolded parts are the modifications. You can copy/paste the function safely.

    HTH = Hope That Helps
    • [ 1 ] Thanks
  • Hi bestfriend,

    Your "fix" worked, with the exception of closing the window on mouseout, but I was able to fix that part myself. So...the bottom line is, I now have the script working as I wanted.

    Thank you much for your assistance!
Join the discussion

Next Topics on Trending Feed

  • 6

    [update: Problem Solved] JavaScript Help Needed: Can You Solve My JavaScript Problem?

    I've created a Javascript that pops open a new window showing a full sized image when someone clicks a thumbnail image, and it closes automatically when they move the cursor off the thumbnail. It's a great way to preview an image without leaving the page and without having to manually close the pop up window. The problem is this: I'd like to have the JavaScript grab the alt text from whichever image is clicked and display it under the image in the pop up window. I can do it using an ID with the image (Get ElementById) but since you can only use one unique ID per page, I'd have to create a separate entry in the script for each ID. That's not practical for what I have in mind.