Mouse over images - without Java

Hi,

I have a question... don't we all have!

Can somebody tell me if it is possible to use mouse-over images
without using 'Java'?

I am working on my website and have an image that links to another
page (when the user clicks on it) but I want the image to change to
another image when the mouse hovers over the image.

If I do a search I get lots of answer to use Java, but I do not want
to use Java. Is there another possibility?

Thanks in advance for your help.

Regards,
Stoeptegeltje

ivo.smulders (AT) gmail (DOT) com wrote:

Can somebody tell me if it is possible to use mouse-over images
without using 'Java'?

The traditional way is to use JavaScript. I've never seen anyone use
Java ... except for the old fphover.class that Microsoft pushed for a while
in last century FrontPage packages.

There is nothing wrong with using JavaScript when creating webpages, only in
depending on it for essential functionality.

It is possible to create a rollover effect with CSS, but if you have images
containing content (such as pictures of text) then you should avoid it as
it depends on stuffing your images into the presentation layer. (If you're
just changing a background and have real text[1] on top of it then :hover
is probably the way to go).


[1] text hidden using CSS doesn't count

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

ivo.smulders (AT) gmail (DOT) com wrote:

Hi,

I have a question... don't we all have!

Can somebody tell me if it is possible to use mouse-over images
without using 'Java'?

I am working on my website and have an image that links to another
page (when the user clicks on it) but I want the image to change to
another image when the mouse hovers over the image.

If I do a search I get lots of answer to use Java, but I do not want
to use Java. Is there another possibility?

Thanks in advance for your help.

Regards,
Stoeptegeltje

Yes it is possible to have rollovers with pure html. I did a page a
long time ago, which I don't have as a standard page on my site any
more, but I've kept up and available as a link from my links page.
Reason: I was just so damned proud of what I'd done, having NO
experience, at that stage, of web coding.

The page is a little slow, due to the graphics, so I created a preload
page, which uses javascript. The preload page is
http://www.africanbush.co.za/SouthAfrica.htm
The actual page (which consists of a map of South Africa as background,
with the various provinces mapped out, and rollovers to create a picture
as you hover over each one) is: http://africanbush.co.za/MianMap.htm

The code is probably a bit cumbersome, but the principles still apply.

Catherine
PS I've also more recently done rollovers using CSS and buttons that
change colour - I can direct you to that page too, if you're inetrested.

--
== Not nuts, just a little eccentric ==
http://www.africanbush.co.za
African Bush Tours and Safaris

pecan wrote:

The page is a little slow, due to the graphics, so I created a preload
page, which uses javascript. The preload page is
http://www.africanbush.co.za/SouthAfrica.htm
The actual page (which consists of a map of South Africa as background,
with the various provinces mapped out, and rollovers to create a picture
as you hover over each one) is: http://africanbush.co.za/MianMap.htm

The code is probably a bit cumbersome, but the principles still apply.

Catherine
PS I've also more recently done rollovers using CSS and buttons that
change colour - I can direct you to that page too, if you're inetrested.

It would help if I could type properly: the second link should read
http://africanbush.co.za/MainMap.htm

--
== Not nuts, just a little eccentric ==
http://www.africanbush.co.za
African Bush Tours and Safaris

Scripsit pecan:

Yes it is possible to have rollovers with pure html.

No it isn't, and by claiming that it is, you exhibit ignorance of what HTML
is.

I don't even have to look at your page (which is undoubtedly massive at
least in terms of resources consumed) to know that have used JavaScript.
Interesting as that might be (only about a few myriads of people have
written such code), it surely isn't "pure html" and it isn't what was asked
for.

The best answer to the original question is "No, and you shouldn't use
non-HTML techniques either to achive the effect." Changing colors is a good
way to help the user see which link is being hovered, and this means that
you should use text links and simple CSS code to change their appearance on
mouseover. Changing an image is either a distraction or an expensive plastic
imitation of the simple CSS approach.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Troy Piggins wrote:

http://africanbush.co.za/MainMap.htm

But it doesn't work with javascript disabled, so it can't be pure
html and you /are/ using scripting because it does work when
enabled...

It works for me without the preload page, it's just VERY slow, as it
needs to load each picture.

I suppose using "onmouseover" is programming, as opposed to html - I
didn't think of it like that. Thing is it's recognised by the browsers
without declaring JS, and that was what suited my purpose at the time.

Maybe the OP would respond?

Catherine

--
== Not nuts, just a little eccentric ==
http://www.africanbush.co.za
African Bush Tours and Safaris

Jukka K. Korpela wrote:

Scripsit pecan:

Yes it is possible to have rollovers with pure html.

No it isn't, and by claiming that it is, you exhibit ignorance of what
HTML is.

I don't even have to look at your page (which is undoubtedly massive at
least in terms of resources consumed) to know that have used JavaScript.
Interesting as that might be (only about a few myriads of people have
written such code), it surely isn't "pure html" and it isn't what was
asked for.

The best answer to the original question is "No, and you shouldn't use
non-HTML techniques either to achive the effect." Changing colors is a
good way to help the user see which link is being hovered, and this
means that you should use text links and simple CSS code to change their
appearance on mouseover. Changing an image is either a distraction or an
expensive plastic imitation of the simple CSS approach.

I stand corrected.
I had forgotten that the code included "return true" which takes it out
of the html category.

--
== Not nuts, just a little eccentric ==
http://www.africanbush.co.za
African Bush Tours and Safaris

Hi all,

Thank you for your replies.

What I can see from the different replies is that there is an urge to
use "java-script" to create the effect of "onmouseover" images.
This does not make me happy, lucky the weekend is still far away and
there is still a big chance I can be happy before the weekend again.

Is there really no other option then using Java? I know CSS can be
used to create text-based effects - I am pretty good with CSS, so that
I can manage ;-).
But for images CSS is not a good option (as mentioned below also), so
I am looking for something else, is VB-script or PHP an option?

One example page below given by pecan (cathrine) on the site
africanbush is something I am looking for, can you give me some info
(links) about the function (AREA SHAPE)?

Thanks again.

Regards,
Ivo

On Jan 28, 10:37 pm, ivo.smuld... (AT) gmail (DOT) com wrote:

Hi,

I have a question... don't we all have!

Can somebody tell me if it is possible to use mouse-over images
without using 'Java'?

I am working on my website and have an image that links to another
page (when the user clicks on it) but I want the image to change to
another image when the mouse hovers over the image.

If I do a search I get lots of answer to use Java, but I do not want
to use Java. Is there another possibility?

Thanks in advance for your help.

Regards,
Stoeptegeltje

Hi again,

That is really a usefull link, thanks :-)

I sort of have what I want now, when the mouse goes over my original
image it shows another image (my weekend will be good again).
BUT..... the image that appears (on mouseover) is not functioning as a
href, the underlying image is still acting like this but it is not
clickable anymore.

(I let appear the image on the same location as the original picture,
to create the mouseover effect, actually it is showing an image
wherever you want on the page and in CSS you define the position).

Does anybody have an idea how I can let the appearing image function
as a href function (link to another webpage).
I tried to add the href tag in there but it looks like it is being
ignored.

Regards,
Stoeptegeltje


On Jan 28, 10:37 pm, ivo.smuld... (AT) gmail (DOT) com wrote:

Hi,

I have a question... don't we all have!

Can somebody tell me if it is possible to use mouse-over images
without using 'Java'?

I am working on my website and have an image that links to another
page (when the user clicks on it) but I want the image to change to
another image when the mouse hovers over the image.

If I do a search I get lots of answer to use Java, but I do not want
to use Java. Is there another possibility?

Thanks in advance for your help.

Regards,
Stoeptegeltje

Gazing into my crystal ball I observed ivo.smulders (AT) gmail (DOT) com writing in
news:1170177730.901292.265910 (AT) a75g2000cwd (DOT) googlegroups.com:

Does anybody have an idea how I can let the appearing image function
as a href function (link to another webpage).
I tried to add the href tag in there but it looks like it is being
ignored.

CSS -->

#nav a:link {background-image:url(bluetile.png; background-
repeat:repeat; color:#fff; background-color: blue}
#nav a:visited {background-image: url(purpletile.png}; background-
repeat:repleat;color:#fff; background-color: purple}
#nav a:hover {background-image:url(yellowtile.png}; background-
repeat:repeat;color:#000; background-color: yellow}

HTML -->

<ul id="nav">
<li><a href="home.html">Home</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

--
Adrienne Boswell at Home
Arbpen Web Site Design Services
http://www.cavalcade-of-coding.info
Please respond to the group so others can share