Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Computing > NZ Computing > One for html gurus...

Reply
Thread Tools

One for html gurus...

 
 
Chris Wilkinson
Guest
Posts: n/a
 
      06-11-2005
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/

 
Reply With Quote
 
 
 
 
Bling-Bling
Guest
Posts: n/a
 
      06-11-2005
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."

 
Reply With Quote
 
 
 
 
Lawrence D'Oliveiro
Guest
Posts: n/a
 
      06-11-2005
In article <42aa9658$(E-Mail Removed)>,
Chris Wilkinson <(E-Mail Removed)> 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?
 
Reply With Quote
 
Chris Wilkinson
Guest
Posts: n/a
 
      06-11-2005
Hi there,

Lawrence D'Oliveiro wrote:
> In article <42aa9658$(E-Mail Removed)>,
> Chris Wilkinson <(E-Mail Removed)> 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/

 
Reply With Quote
 
Chris Wilkinson
Guest
Posts: n/a
 
      06-11-2005
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/

 
Reply With Quote
 
Bling-Bling
Guest
Posts: n/a
 
      06-11-2005
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."

 
Reply With Quote
 
Chris Wilkinson
Guest
Posts: n/a
 
      06-12-2005
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/

 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      06-13-2005
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.
 
Reply With Quote
 
Bling-Bling
Guest
Posts: n/a
 
      06-13-2005
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."

 
Reply With Quote
 
AD.
Guest
Posts: n/a
 
      06-13-2005
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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can one declare more than one signal on one line? Merciadri Luca VHDL 4 11-01-2010 02:00 PM
Nike air force one, air force 1, air force one low cut, air force one abdul_razak@indiatimes.com Digital Photography 2 12-31-2008 04:29 PM
Samsung SCD6040 - Anyone have one, used one, or have reviews on one? g wills Digital Photography 0 09-08-2004 08:06 PM
CSS aligning two things on one line with one left and one right news.frontiernet.net HTML 6 04-16-2004 02:44 AM
Using One XSLT and multiple XML Problem (One is XML and another one is XBRL) loveNUNO XML 2 11-20-2003 06:47 AM



Advertisments