SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I think I might need some custom JS

    Hi,

    I posted about this in the CSS forum, but upon further investigation, it now seems CSS won't do what I need and JS will. So, I'd love it if you could take a look....

    I've got a project where I need to take a photo mosaic (one master image that is composed of smaller image tiles - samples ) and create an image map that allows each tile to be clickable. But also, I need each tile to enlarge upon hovering.

    I'm looking at the Modified Hoverbox Image Gallery for the creation of the enlargements. I know I could just take each image and place them in this type of layout to create the illusion of a photo mosaic, but I'd much rather take an actual mosaic and use this technique.

    I've downloaded a free trial of the Coffee Cup Image Mapper . They have a feature that allows you to put some text in for the mouseover events. This is what it looks like in the code:

    <area shape="rect" coords="59,63,117,117" href="" alt="" OnMouseOver="window.status='test'; return true" OnMouseOut="window.status=''; return true">

    So, I'm wondering....is there a way to do this with images instead of text? And if so, is there someone here who can help me with the JS?
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  2. #2
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,345
    Mentioned
    192 Post(s)
    Tagged
    5 Thread(s)
    Susan,
    If you have a 'handle' to the images (a CSS classID), this technique will provide what you need.

    The big disadvantage with this approach (versus CSS) is that you must rely on the browser to have Javascript enabled. Is your environment such that you can be sure (or, at least, tolerate the minority being disappointed) users have JS enabled?

    There are ways to allow it to degrade gracefully. Message me and I will help you with it.

    THOM
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Thom,

    Thanks so much for your reply. I know there may be some who have JS turned off, but in that case, they would still be able to access the links that are within each hotspot. They will just miss out on the enlarged image, right? I think this option will be desirable since it will keep the page size down. There will be about 1,000 images and doing this with CSS may cause the page size to be too large.

    I will message you now. Thank you!!
    Susan
    Auxano Creative (formerly The WebDesign Loft)


Bookmarks

Posting Permissions

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