6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

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

by Dennis Gaskill
5 replies
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!
#javascript #puzzle
  • Profile picture of the author bestfriend
    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
    {{ DiscussionBoard.errors[4444523].message }}
    • Profile picture of the author Dennis Gaskill
      Originally Posted by bestfriend View Post


      You can also get a certain image's alt text, selecting it with its ID:
      getElementById('thumbnailImageID').getAttribute('a lt');
      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?
      Signature

      Just when you think you've got it all figured out, someone changes the rules.

      {{ DiscussionBoard.errors[4449073].message }}
  • Profile picture of the author Dennis Gaskill
    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?
    Signature

    Just when you think you've got it all figured out, someone changes the rules.

    {{ DiscussionBoard.errors[4444635].message }}
  • Profile picture of the author bestfriend
    Hi Dennis,

    How would I add your code so it works?
    As looking your function, I concluded that your links are something like this:

    <a href="#" onclick="open_new_window('image.jpg')" title="Click here to see bigger version"><img src="imageThumbnail.jpg" alt="Precious image alt text" /></a>

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

    <a href="#" onclick="open_new_window(this)" title="image.jpg"><img src="imageThumbnail.jpg" alt="Precious image alt text" /></a>

    And your function to this:

    function open_new_window(link)
    {
    var image = link.title;
    var altText = link.children[0].alt;

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


    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
    {{ DiscussionBoard.errors[4452741].message }}
  • Profile picture of the author Dennis Gaskill
    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!
    Signature

    Just when you think you've got it all figured out, someone changes the rules.

    {{ DiscussionBoard.errors[4454576].message }}

Trending Topics