Page 1 of 3 123 LastLast
Results 1 to 10 of 22

Thread: Mouse-over image enlargement?

  1. #1
    Member
    Join Date
    May 2010
    Location
    Brisbane, Australia
    Posts
    55

    Default Mouse-over image enlargement?

    Can someone suggest how I can do popup image enlargement, such as in the following page?

    http://www.dealextreme.com/details.dx/sku.18927

    I'm still a novice at this, so a detailed explanation would be appreciated!

    Thanks,
    Adrian.

  2. #2
    Twayne
    Guest

    Default Re: Mouse-over image enlargement?

    In news:adrianjball.4bnafn@no-mx.forums.netobjects.com,
    adrianjball <adrianjball.4bnafn@no-mx.forums.netobjects.com> typed:
    > Can someone suggest how I can do popup image enlargement,
    > such as in the following page?
    >
    > http://www.dealextreme.com/details.dx/sku.18927
    >
    > I'm still a novice at this, so a detailed explanation would
    > be appreciated!
    >
    > Thanks,
    > Adrian.


    Just create a larger image of the first image and use that for the one that
    shows upon rollover. You do this in styles screen. This is a good time to
    put your favorite image editor into NOF's Options if you haven't already;
    then it's just a keyclick to open the image you want to work on. Be sure to
    remember to give it the correct name so NOF will find it.

    HTH,

    Twayne`



  3. #3
    Member
    Join Date
    May 2010
    Location
    Brisbane, Australia
    Posts
    55

    Default

    Hi Twayne,
    But if I use the NOF rollover function, doesn't the big image then have to be placed on the page also (and initially not shown in browser)? I want it to pop up OVER the page, as in the site I pointed to. Because my page is going to be quite full of little pictures, and I want each to enlarge as the mouse is rolled over them.
    Cheers,
    Adrian.

  4. #4
    Senior Member
    Join Date
    Apr 2010
    Posts
    352

  5. #5
    Member
    Join Date
    May 2010
    Location
    Brisbane, Australia
    Posts
    55

    Default

    Thanks Andrew, I'll give that a try. From the comments on that site though it seems it may not be reliable cross-platform. But I'll certainly give it a try!

  6. #6
    Senior Member
    Join Date
    Apr 2010
    Posts
    352

    Default

    Not sure why you say that, it works in all modern browsers and tested by me. It's just CSS.

  7. #7
    Member
    Join Date
    May 2010
    Location
    Brisbane, Australia
    Posts
    55

    Default

    I was just reading the many, many comments on that page, and have noted some of the tweaks users have had to make to get it to work cross-platform.

    I was rather hoping there was some way NOF could do it without scripting, but I guess not.

  8. #8
    Senior Member
    Join Date
    Apr 2010
    Posts
    352

    Default

    Only way NOF could do it is via a popup page, otherwise it requires a script. I have personally tested the CSS in IE8/7, Safari 4, Firefox 3, Chrome 4 as I do with anything I use.

  9. #9
    Member
    Join Date
    May 2010
    Location
    Brisbane, Australia
    Posts
    55

    Default

    Well, that does actually seem to work reasonably well. But now I have a couple of real 'dumb newbie' questions:

    1) Is there any way to make the thumbnail display in the NOF page layout, or do I have to preview to see what I have put where?

    2) If I want to put my thumbnails in table cells to get them all lined up nicely, how do I do it? If I drop the html into the cell, I get:

    <td width="258"

    <a class="thumbnail" href="#thumb"><img
    src="file:///Z:/Website/Testing/Images/bio_Yasuki_Nakamura-small.jpg"
    width="200px" height="200px" border="0" /><span><img
    src="file:///Z:/Website/Testing/Images/bio_Yasuki_Nakamura.jpg" /><br />Yasuki
    Nakamura.</span></a>

    >
    <p style="margin-bottom: 0px;">&nbsp;</p>
    </td>

    Which gives me the picture in the cell, but adds a stray '>' after the picture! What's the proper way to do this?

  10. #10
    Twayne
    Guest

    Default Re: Mouse-over image enlargement?

    In news:adrianjball.4bnczb@no-mx.forums.netobjects.com,
    adrianjball <adrianjball.4bnczb@no-mx.forums.netobjects.com> typed:
    > Hi Twayne,
    > But if I use the NOF rollover function, doesn't the big
    > image then have to be placed on the page also (and
    > initially not shown in browser)? I want it to pop up OVER
    > the page, as in the site I pointed to. Because my page is
    > going to be quite full of little pictures, and I want each
    > to enlarge as the mouse is rolled over them.
    > Cheers,
    > Adrian.


    Actually what you'll be doing is making CSS styles for all of it; NOF does
    it for you, that's all, and of course it doesn't give you 100% capabilities
    of writing your own CSS, but it does a great job for most things and if I
    understand you correctly, it'll work fine for you.

    Essentially I think you want: a thumbnail and when rolled over, it becomes a
    large picture. Two ways I can thinl of, assuming it meets with your needs:
    Use a Gallery. There you have to click on the thumbnails though, and it's
    not exactly what I understand you to need.

    Next, you could (assuming a familiarity with Styles View and using an image
    editor to make changes to it and a decent image editor available):

    Go to the Styles View. Note the button sets shown there are the ones
    onscreen and that below the standard, actual buttons where there's a place
    to hover your mouse and see what it'll look like. What you want it to look
    like will be one of the images for the buttons above that you made larger.
    Note the types of "rollover" at the top of the columns; the buttons below
    are the ones you'll want to change.
    Those can be used for your rollover images. Release the REad-only if it's
    set, and create a new set of "buttons" (buttonset 2). Use whichever rollover
    type appeals to you. Select it above inthe actual pics, open it with your
    graphic editor, put whatever you want in there, and save it back without
    changing the name of the graphic. Note the CSS property sheet on the lower
    right where you can make many adjustments to the images you're creating too;
    very handy.
    NOTE: Works best with .gif and .jpg images; NOF doesn't show .png well
    inside the program, but png will work when published. NOF shows .png images
    as broken images in most places, but they aren't really.

    OR,

    If you're up on CSS at all, do the above and then look at the CSS created
    for it, and use that as the basis for making your own CSS file. Personally
    I haven't found it necessary to roll my own CSS files with the exception of
    PHP scripts I use, but ... there's no perfect right or wrong way to do these
    things.

    Aside: I set PSP Pro as my editor of choice, so all I have to do is click
    the graphic to pull it up in my editor. Also quite handy.

    HTH,

    Twayne`



Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •