SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Interactive images

    It has been so long since I have needed to do something like this I am not even sure what the best way to do this any more. I long time ago i used to use image maps to do this but I need to knwo if ther eis a better way now, other than Flash of course.

    I have a numbered grid that represetns burrial plots that are for sale. The ones that are avaialbe will be highlighted. When you click on the highlighrted square, that persons contact information will show up in a specific area (one that remains constatnt) adn the square will change to a different color. how is the best way to go about this. HTML and CSS I know, the rest is a bit hit or miss.

    Any suggestions?

    many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You can do hovers with CSS, but getting the clicked item to remain selected really requires JavaScript. There are some very fancy scripts out there that do this (using libraries like jQuery), but before going down that route, you could consider a simpler, accessible version as shown here:

    http://domscripting.com/domsters/photos.html

    Here is another example of the same script with the clicked item highlighted:

    http://gtwebdev.com/workshop/misc/image-swap.php

    That could be adapted to your needs.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •