SitePoint Sponsor

User Tag List

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

    A Rollover Image Map Question

    Hi,

    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.

    Is it possible? I'm having a hard time understanding how I might make it work with a mosaic. Wouldn't I need to load each image individually anyway?

    I am using Dreamweaver's tool to draw in hotspots. The code it's putting out is like this:

    <area shape="rect" coords="0,0,61,61" href="#" />

    How would I apply the CSS for the Hoverbox gallery to something like this?

    Can anyone give me a nudge in the right direction here?
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  2. #2
    SitePoint Enthusiast
    Join Date
    Jun 2007
    Location
    Ohio
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm finding out that it's probably not possible to do this with CSS. I think I may need to apply JS to accomplish what I need. I'm going to pop over to that forum and ask...
    Susan
    Auxano Creative (formerly The WebDesign Loft)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,818
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If I understand you correctly then you have a large image that is made from smaller unrelated images. Looking at the example link you posted it looks like one of those images is made up with 1,00 images for just one image.

    Is this going to be feasible purely from the time taken to load 1000 images or have I got the wrong end of the stick?

    You can easily create this in css just by positioning an anchor over the image and using similar techniques as seen in the hoverbox you linked to.

    Stu Nichols has loads of image map examples also.

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

    You understand correctly. The master image is made of smaller unrelated images. There will be about 1,000 of them total. Because of the reason you mentioned (time it will take to load 1,000 images), I'm finding that CSS is probably not the way to go here. I posted this question over in the JS forum because it looks like JS might be the only way.
    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
  •