One for html gurus...

Discussion in 'NZ Computing' started by Chris Wilkinson, Jun 11, 2005.

  1. Hi there,

    Have read the HTML 4 and CSS docs until my eyes bled, but still cannot
    figure how to do the following...

    Position a rollover image, on top of a larger image that acts as a
    <map>. The <area> tags have no links (nohref), and are only there so
    I can generate onmouseover/out events to create the rollovers. No
    matter what I've tried the browser will position the rollover image
    below the map image, despite using absolute css positioning on both
    images...

    Anyone have any clues as to a fix for this one?

    --
    Kind regards,

    Chris Wilkinson, Brisbane, Australia.
    Anyone wishing to email me directly can remove the obvious
    spamblocker, and replace it with t p g <dot> c o m <dot> a u

    Software patents are killing YOUR freedom, STOP THEM NOW!
    http://swpat.ffii.org/ http://nosoftwarepatents.com/
    Chris Wilkinson, Jun 11, 2005
    #1
    1. Advertising

  2. Chris Wilkinson

    Bling-Bling Guest

    On Sat, 11 Jun 2005 17:50:26 +1000, Chris Wilkinson wrote:

    > Position a rollover image, on top of a larger image that acts as a <map>.
    > The <area> tags have no links (nohref), and are only there so I can
    > generate onmouseover/out events to create the rollovers. No matter what
    > I've tried the browser will position the rollover image below the map
    > image, despite using absolute css positioning on both images...
    >
    > Anyone have any clues as to a fix for this one?


    I would respectfully suggest that you cannot replace a part of an image
    with another image.

    You'll probably need to cut up your big image into smaller images, and not
    use an image map, and then do plain rollovers. That'll be the simplest
    most effective solution.


    Bling Bling

    --
    IBM: "Linux is not just another operating system. It represents a
    collaboration of the best programmers in the industry coming together to
    create an operating system that works on any hardware platform."
    Bling-Bling, Jun 11, 2005
    #2
    1. Advertising

  3. In article <42aa9658$>,
    Chris Wilkinson <> wrote:

    >No
    >matter what I've tried the browser will position the rollover image
    >below the map image, despite using absolute css positioning on both
    >images...


    By "browser" you mean MSIE? That has had long-standing issues with its
    CSS (non)support. Have you tested your HTML with FireFox, just for
    comparison?
    Lawrence D'Oliveiro, Jun 11, 2005
    #3
  4. Hi there,

    Lawrence D'Oliveiro wrote:
    > In article <42aa9658$>,
    > Chris Wilkinson <> wrote:
    >
    >
    >>No
    >>matter what I've tried the browser will position the rollover image
    >>below the map image, despite using absolute css positioning on both
    >>images...

    >
    >
    > By "browser" you mean MSIE? That has had long-standing issues with its
    > CSS (non)support. Have you tested your HTML with FireFox, just for
    > comparison?


    I'd have thought you'd pick my Linux allegiance Lawrence! I've
    tested with Konqueror, Netscape 7.2, Firefox 1.0.3, which all
    faithfully do the same thing that I don't want them to do!

    Bling-bling suggested I cut the large image up into bits so
    that my mouseover <area>'s aren't part of the image that has
    the rollover effect, advice I will take. Its a tricky slice
    n dice job, but not impossible...

    --
    Kind regards,

    Chris Wilkinson, Brisbane, Australia.
    Anyone wishing to email me directly can remove the obvious
    spamblocker, and replace it with t p g <dot> c o m <dot> a u

    Software patents are killing YOUR freedom, STOP THEM NOW!
    http://swpat.ffii.org/ http://nosoftwarepatents.com/
    Chris Wilkinson, Jun 11, 2005
    #4
  5. Hi there,

    Bling-Bling wrote:
    > On Sat, 11 Jun 2005 17:50:26 +1000, Chris Wilkinson wrote:
    >
    >
    >>Position a rollover image, on top of a larger image that acts as a <map>.
    >>The <area> tags have no links (nohref), and are only there so I can
    >>generate onmouseover/out events to create the rollovers. No matter what
    >>I've tried the browser will position the rollover image below the map
    >>image, despite using absolute css positioning on both images...
    >>
    >>Anyone have any clues as to a fix for this one?

    >
    >
    > I would respectfully suggest that you cannot replace a part of an image
    > with another image.
    >
    > You'll probably need to cut up your big image into smaller images, and not
    > use an image map, and then do plain rollovers. That'll be the simplest
    > most effective solution.


    I was hoping you wouldn't say that, but deep down I wondered if it
    would be the solution. Its a slightly tricky slice n dice, but it
    is possible...

    Cheers...

    --
    Kind regards,

    Chris Wilkinson, Brisbane, Australia.
    Anyone wishing to email me directly can remove the obvious
    spamblocker, and replace it with t p g <dot> c o m <dot> a u

    Software patents are killing YOUR freedom, STOP THEM NOW!
    http://swpat.ffii.org/ http://nosoftwarepatents.com/
    Chris Wilkinson, Jun 11, 2005
    #5
  6. Chris Wilkinson

    Bling-Bling Guest

    On Sat, 11 Jun 2005 21:52:23 +1000, Chris Wilkinson wrote:

    > I was hoping you wouldn't say that, but deep down I wondered if it
    > would be the solution. Its a slightly tricky slice n dice, but it
    > is possible.


    Have you got a mockup version online?

    Probably the easiest way would be to create the rollover and to slice the
    image would be to load the two images as two layers of one image. Position
    your rollover layer exactly where you want it. Then slice the image, and
    save the various resulting bits using Image Ready.

    If you want a hand, give us a yell - I'll be happy to help.


    Bling Bling

    --
    IBM: "Linux is not just another operating system. It represents a
    collaboration of the best programmers in the industry coming together to
    create an operating system that works on any hardware platform."
    Bling-Bling, Jun 11, 2005
    #6
  7. Hi there,

    Bling-Bling wrote:
    > On Sat, 11 Jun 2005 21:52:23 +1000, Chris Wilkinson wrote:
    >
    >
    >>I was hoping you wouldn't say that, but deep down I wondered if it
    >>would be the solution. Its a slightly tricky slice n dice, but it
    >>is possible.

    >
    > Have you got a mockup version online?


    Nope, just the local copy. I wont have any trouble cutting it up
    into parts, just couldn't be bothered recently...

    --
    Kind regards,

    Chris Wilkinson, Brisbane, Australia.
    Anyone wishing to email me directly can remove the obvious
    spamblocker, and replace it with t p g <dot> c o m <dot> a u

    Software patents are killing YOUR freedom, STOP THEM NOW!
    http://swpat.ffii.org/ http://nosoftwarepatents.com/
    Chris Wilkinson, Jun 12, 2005
    #7
  8. Chris Wilkinson

    Richard Guest

    Chris Wilkinson wrote:
    > Hi there,
    >
    > Bling-Bling wrote:
    >
    >> On Sat, 11 Jun 2005 21:52:23 +1000, Chris Wilkinson wrote:
    >>
    >>
    >>> I was hoping you wouldn't say that, but deep down I wondered if it
    >>> would be the solution. Its a slightly tricky slice n dice, but it
    >>> is possible.

    >>
    >>
    >> Have you got a mockup version online?

    >
    >
    > Nope, just the local copy. I wont have any trouble cutting it up
    > into parts, just couldn't be bothered recently...



    Can you not put the desired image as the background of the span/div, and then
    use a single pixel transparent gif ontop as the image that you "slice up"?
    thatway there is only one image being downloaded for the multiple roll overable
    areas.
    Richard, Jun 13, 2005
    #8
  9. Chris Wilkinson

    Bling-Bling Guest

    On Mon, 13 Jun 2005 16:43:24 +1200, Richard wrote:

    > Can you not put the desired image as the background of the span/div, and then
    > use a single pixel transparent gif ontop as the image that you "slice up"?


    how do you slice a single pixel gif?


    Bling Bling

    --
    IBM: "Linux is not just another operating system. It represents a
    collaboration of the best programmers in the industry coming together to
    create an operating system that works on any hardware platform."
    Bling-Bling, Jun 13, 2005
    #9
  10. Chris Wilkinson

    AD. Guest

    On Mon, 13 Jun 2005 18:03:55 +1200, Bling-Bling wrote:

    > On Mon, 13 Jun 2005 16:43:24 +1200, Richard wrote:
    >
    >> Can you not put the desired image as the background of the span/div, and
    >> then use a single pixel transparent gif ontop as the image that you
    >> "slice up"?

    >
    > how do you slice a single pixel gif?


    I assume he meant 'stretch' the single pixel gif to the required
    dimensions with attributes then overlay the map coordinates over that.

    --
    Cheers
    Anton
    AD., Jun 13, 2005
    #10
  11. Chris Wilkinson

    Bling-Bling Guest

    On Mon, 13 Jun 2005 18:21:59 +1200, AD. wrote:

    > On Mon, 13 Jun 2005 18:03:55 +1200, Bling-Bling wrote:
    >
    >> On Mon, 13 Jun 2005 16:43:24 +1200, Richard wrote:
    >>
    >>> Can you not put the desired image as the background of the span/div, and
    >>> then use a single pixel transparent gif ontop as the image that you
    >>> "slice up"?

    >>
    >> how do you slice a single pixel gif?

    >
    > I assume he meant 'stretch' the single pixel gif to the required
    > dimensions with attributes then overlay the map coordinates over that.


    Yes - but how would that produce the effect of changing the visible image
    upon mouseover?


    Bling Bling

    --
    IBM: "Linux is not just another operating system. It represents a
    collaboration of the best programmers in the industry coming together to
    create an operating system that works on any hardware platform."
    Bling-Bling, Jun 13, 2005
    #11
  12. In article <pan.2005.06.13.06.53.24.843689@TRACKER>,
    Bling-Bling <> wrote:

    >... how would that produce the effect of changing the visible image
    >upon mouseover?


    I just thought, there is another way of changing the image upon
    mouseover, and that's using Dynamic HTML--that is, assign a new URL to
    the "src" attribute of the "img" tag using JavaScript.
    Lawrence D’Oliveiro, Jun 13, 2005
    #12
  13. Hi there,

    Richard wrote:
    > Chris Wilkinson wrote:
    >
    >> Hi there,
    >>
    >> Bling-Bling wrote:
    >>
    >>> On Sat, 11 Jun 2005 21:52:23 +1000, Chris Wilkinson wrote:
    >>>
    >>>
    >>>> I was hoping you wouldn't say that, but deep down I wondered if it
    >>>> would be the solution. Its a slightly tricky slice n dice, but it
    >>>> is possible.
    >>>
    >>>
    >>>
    >>> Have you got a mockup version online?

    >>
    >>
    >>
    >> Nope, just the local copy. I wont have any trouble cutting it up
    >> into parts, just couldn't be bothered recently...

    >
    >
    >
    > Can you not put the desired image as the background of the span/div, and
    > then use a single pixel transparent gif ontop as the image that you
    > "slice up"? thatway there is only one image being downloaded for the
    > multiple roll overable areas.


    The job is done, using highly compressed jpegs, and some
    relatively straightforward CSS positioning - works well.
    I also had a 'typo' that took the form of using
    <DIV name="myname"> instead of <DIV id="myname">...that
    confused things for awhile...d'oh! :)

    --
    Kind regards,

    Chris Wilkinson, Brisbane, Australia.
    Anyone wishing to email me directly can remove the obvious
    spamblocker, and replace it with t p g <dot> c o m <dot> a u

    Software patents are killing YOUR freedom, STOP THEM NOW!
    http://swpat.ffii.org/ http://nosoftwarepatents.com/
    Chris Wilkinson, Jun 13, 2005
    #13
    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. Wayne Boxall

    Wireless gurus??? Check out this!

    Wayne Boxall, Jun 20, 2004, in forum: Wireless Networking
    Replies:
    2
    Views:
    3,708
    William B.
    Jun 22, 2004
  2. Oleg Tipisov
    Replies:
    6
    Views:
    3,733
  3. M. Murcek

    One of you ASP.NET gurus...

    M. Murcek, Jul 14, 2005, in forum: Windows 64bit
    Replies:
    10
    Views:
    547
    Andre Da Costa [Extended64]
    Jul 15, 2005
  4. Giuen
    Replies:
    0
    Views:
    874
    Giuen
    Sep 12, 2008
  5. Monima
    Replies:
    0
    Views:
    1,790
    Monima
    Dec 14, 2010
Loading...

Share This Page