js or? A web design question

Discussion in 'NZ Computing' started by David, Nov 26, 2003.

  1. David

    David Guest

    Hi - I have a map of NZ, and it has been divided up into hotspots by region
    for the usual links to a page that references the co-ordinates chosen.

    What I was wanting to ALSO do is to have a different picture come up as the
    mouse rolled over each region/hotspot on the map (on the same page) - I have
    looked and looked and cannot find a page that is doing it or something
    similar I could adapt. It is not mouseover and replace, but mouseover and
    show (in different place/table) on same page

    Anyone point me in the right direction?

    cheers
    David, Nov 26, 2003
    #1
    1. Advertising

  2. David

    AD. Guest

    On Wed, 26 Nov 2003 17:31:21 +1300, David wrote:

    > Hi - I have a map of NZ, and it has been divided up into hotspots by
    > region for the usual links to a page that references the co-ordinates
    > chosen.
    >
    > What I was wanting to ALSO do is to have a different picture come up as
    > the mouse rolled over each region/hotspot on the map (on the same page) -
    > I have looked and looked and cannot find a page that is doing it or
    > something similar I could adapt. It is not mouseover and replace, but
    > mouseover and show (in different place/table) on same page


    I'm not sure how the hotspots are implemented, but you can easily make
    elements visible or invisible on mouseovers using javascript and
    stylesheet display attributes.

    You could either give all the images ids and show/hide them, or change the
    image properties of a certain element.

    Cheers
    Anton
    AD., Nov 26, 2003
    #2
    1. Advertising

  3. David

    KS Guest

    David wrote:
    > Hi - I have a map of NZ, and it has been divided up into hotspots by
    > region for the usual links to a page that references the co-ordinates
    > chosen.
    >
    > What I was wanting to ALSO do is to have a different picture come up
    > as the mouse rolled over each region/hotspot on the map (on the same
    > page) - I have looked and looked and cannot find a page that is doing
    > it or something similar I could adapt. It is not mouseover and
    > replace, but mouseover and show (in different place/table) on same
    > page


    What pgm are you using for this ? Dreamweaver does a simple and effective
    multiple image swop and restore, which sounds a bit like what you're trying
    to achieve.

    Mouse over, swop two images (one on the map to highlite where your mouse is
    and the other to show the other image of data in the different place/table),
    then restore on mouse out.
    KS, Nov 26, 2003
    #3
  4. David

    David Guest


    > What pgm are you using for this ? Dreamweaver does a simple and effective
    > multiple image swop and restore, which sounds a bit like what you're

    trying
    > to achieve.
    >
    > Mouse over, swop two images (one on the map to highlite where your mouse

    is
    > and the other to show the other image of data in the different

    place/table),
    > then restore on mouse out.
    >

    Hi thanks for the tip - I downloaded Dreamweaver, but if you could point me
    in the right direction with this program so I can see what I need to do, it
    would be a help!

    cheers

    David
    David, Nov 26, 2003
    #4
  5. David

    KS Guest

    > Hi thanks for the tip - I downloaded Dreamweaver, but if you could
    > point me in the right direction with this program so I can see what I
    > need to do, it would be a help!


    Well, I've done it like this.
    image#01 - main textarea that needs to be swapped
    image#02 - main textarea with new swapped image info
    image#03 - section title that needs to be swapped with mouse over
    image#04 - section title swap version

    My weird logic means any image with an odd number is an original, and an
    image with an even number is the swopped image. Handy when changing the
    content of the image.

    Visitor moves mouse over section title (madeup of image#03), and image#03
    swops to image#04 to show their mouse is over it. Also, image#01 swops a
    generic text statement to image#02, specific to image#03 section.

    You need to name each image a specific, easily identifiable name, to keep
    track of everything.

    So, go to image#03, which must have an anchor by the way, and Window,
    Behaviours. Select +, then swap image. You're then presented with a list of
    all of the images on the page - this is where naming everything logically
    comes handy - and it should automatically show you the image and anchor
    you're currently working on. Once you've selected the swop image, a *
    appears next to the image name. While you're still in the swap image menu,
    click on image#01 name, and select a swop image attribute for that too. When
    you've finished, click ok.

    You can select as *many* swap image commands on any anchor as you like.

    So you could have one anchor, and have 5 images swop when the mouse moves
    over it. Just keep selecting them.

    But to save yourself from going insane, name each image logically as you
    insert them into the page.
    KS, Nov 26, 2003
    #5
  6. David wrote:
    > I have looked and looked and cannot find a page that is doing
    > it or something similar I could adapt.
    > Anyone point me in the right direction?


    Perhaps you are looking to implement functionality similar to this page:
    http://home.nzcity.co.nz/weather/
    David Hallett, Nov 27, 2003
    #6
  7. David

    David Guest

    "David Hallett" <> wrote in message
    news:bq3npg$7a9$...
    > David wrote:
    > > I have looked and looked and cannot find a page that is doing
    > > it or something similar I could adapt.
    > > Anyone point me in the right direction?

    >
    > Perhaps you are looking to implement functionality similar to this page:
    > http://home.nzcity.co.nz/weather/
    >

    Brilliant - that's it - hell of a code set in there! Just will edit out the
    bits I don't want and see what they have done. Thanks very much.

    Also for KS - thanks for the help, had a look at this and in Dreamweaver it
    appears to be something to do with hidden layers etc.
    http://www.macromedia.com/support/dreamweaver/ts/documents/simple_layer_demo.htm
    David, Nov 27, 2003
    #7
  8. David

    KS Guest

    >> Perhaps you are looking to implement functionality similar to this
    >> page: http://home.nzcity.co.nz/weather/
    >>

    > Brilliant - that's it - hell of a code set in there! Just will edit
    > out the bits I don't want and see what they have done. Thanks very
    > much.


    A perfect example of multiple mouseover work.

    > Also for KS - thanks for the help, had a look at this and in
    > Dreamweaver it appears to be something to do with hidden layers etc.
    >

    http://www.macromedia.com/support/dreamweaver/ts/documents/simple_layer_demo.htm

    Well yes layers is another way of doing it. I just thought if you were
    starting off in DW, js mouseover work would be a bit easier on the brain.
    But the nzcity weather is a good example of simple mutiple mouseover work.

    Planning is they key to getting this to work successfully though.
    KS, Nov 27, 2003
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. wouldntyouliketoknow

    Is there a Mozilla web-design platform?

    wouldntyouliketoknow, Nov 29, 2005, in forum: Firefox
    Replies:
    3
    Views:
    487
  2. TomTom
    Replies:
    2
    Views:
    799
    TomTom
    Oct 9, 2004
  3. Boy Howdy

    Web page design/fonts question....

    Boy Howdy, Nov 16, 2004, in forum: Computer Support
    Replies:
    10
    Views:
    790
    Dan Evans
    Nov 18, 2004
  4. Replies:
    1
    Views:
    603
    Roy G
    Sep 4, 2006
  5. Replies:
    5
    Views:
    390
    Baloo
    Feb 16, 2008
Loading...

Share This Page