Web Analytics Made Easy -
StatCounter Pop-up image preview on mouseover... what would I use for that? - CodingForum

Announcement

Collapse
No announcement yet.

Pop-up image preview on mouseover... what would I use for that?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Pop-up image preview on mouseover... what would I use for that?

    I wanted to post a question asking how to do full-sized image popups when you mouseover a thumbnail but I didn't know what coding language would be best for that... javascript? I want to post it in the right forum.

  • #2
    Javascript ...




    .

    Comment


    • #3
      Thanks!

      Comment


      • #4
        I decided to go with this one: http://www.kevinandamanda.com/whatsn...pop-up-preview

        But I'm not having any luck with it. I don't know what I'm doing wrong. I added the css to my stylesheet, uploaded the .js file, and made a test page here: http://opalcat.com/article/testing-mouseover

        But nothing happens when I mouseover the image. I'm sending them an email but I thought I'd post here as well, in case there is something obvious I'm doing wrong.

        Is there a way to tell if the .js file is actually loading? Do I need to put a slash at the beginning so it looks in the main directory? Or would I need an absolute path from the server to do that?

        Comment


        • #5
          Compare their HTML source to yours ...

          At the top of their script, they reference several .js and .css files ... you do not.

          I suspect you're missing .js scripts, .css files, and possibly path references to them are not correct?


          .

          Comment


          • #6
            I added their css to my own css file so I wouldn't have to reference them both... will that not work?

            In their example included in the zip file (which works) the html is only this:

            Code:
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Untitled Document</title>
            
            <link rel="stylesheet" href="style.css" type="text/css">
            <script src="mouseover_popup.js" language="JavaScript" type="text/javascript"></script>
            
            
            </head>
            
            <body>
            <div style="display: none; position: absolute; z-index: 110; left: 400; top: 100; width: 15; height: 15" id="preview_div"></div>
            
            
            <img src="smallpic.jpg" border="0" onmouseover="showtrail('largepic.jpg','Title of the Picture Goes Here',310,440)" onmouseout="hidetrail()"></a>
            
            
            
            </body>
            </html>

            Comment


            • #7
              I separated it out so that the stylesheet is on its own, but it still isn't working.

              Again, the example only calls for one .js file and the example works when I open it.


              AHA I figured it out. I had to put the full url to the .js file in the head tag. A relative path nor just the filename worked.

              Comment

              Working...
              X
              😀
              🥰
              🤢
              😎
              😡
              👍
              👎