Website Design Forum - Mouse over images

Author

Mouse over images - without Java

ivo.smulders@gmail.com

2007-01-30, 10:08 am

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

David Dorward

2007-01-30, 10:08 am

ivo.smulders@XXXXXXXXXX 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

pecan

2007-01-30, 10:08 am

ivo.smulders@XXXXXXXXXX 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

2007-01-30, 10:08 am

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

Jukka K. Korpela

2007-01-30, 10:08 am

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

2007-01-30, 10:08 am

* pecan is quoted & my replies are inline below :
> pecan wrote:
>
>
> It would help if I could type properly: the second link should read
> 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...

--
Troy Piggins ,-O (o- O All your sigs are belong to us.
http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTen4g7OPa3Xs7MIr8p7

pecan

2007-01-30, 10:08 am

Troy Piggins wrote:
>
> 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

pecan

2007-01-30, 10:08 am

Jukka K. Korpela wrote:
> Scripsit pecan:
>
>
> 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

ivo.smulders@gmail.com

2007-01-30, 10:08 am

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...@XXXXXXXXXX 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

Troy Piggins

2007-01-30, 10:08 am

* ivo.smulders@XXXXXXXXXX is quoted & my replies are inline below:
>
> 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

I found this site the other day:

http://www.dynamicdrive.com/style/c...p-image-viewer/

Put your mouse over the images or the links and you see enlarged
versions of images. Perhaps it helps you?

> 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)?

--
Troy Piggins ,-O (o- O All your sigs are belong to us.
http://piggo.com/~troy O ) //\ O
RLU#415538 `-O V_/_ OOO
hackerkey://v3sw5HPUhw5ln4pr6OSck1ma9u6LwXm5l6Di2e6t5MGSRb8OTen4g7OPa3Xs7MIr8p7

ivo.smulders@gmail.com

2007-01-30, 12:28 pm

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...@XXXXXXXXXX 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

Adrienne Boswell

2007-01-31, 6:18 am

Gazing into my crystal ball I observed ivo.smulders@XXXXXXXXXX writing in
news:1170177730.901292.265910@a75g2000cwd.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

incitatus

2007-01-31, 2:34 pm

quote:
Originally posted by ivo.smulders@XXXXXXXXXX
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.

Forgive me if i am wrong but i believe you can use pure css and html to achieve your goal. tutorials.alsacreations.com is my favorite reference for css menus. you can use the rollover images in such a fashion. take a look at the codes and customize it for just the one image. the links should be fine.

What adrienne put should work, but if you have trouble, look to the tutorials page at alsacreations.

best!

incitatus

2007-01-31, 2:50 pm

quote:
Originally posted by ivo.smulders@XXXXXXXXXX
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.