How do I create mouse overs for web documents?

L

loomis

I'm using Publisher to create a web page. In Publisher, how do I use
mouse-overs to create bubble comments on "hot words" or "shapes"?
 
D

DavidF

Google for free JavaScript or mouse-over script or...., and when you find
the code that produces the effect you want, then use the Insert HTML Code
Fragment function in Publisher. There are lots of JavaScript sites out there
that offer free code.

DavidF
 
M

Max Patmoy

Dear David,

Can you give us the easiest basic script for a plain mouseover. All the
"Googled" scripts are too complicated.

Max Patmoy
 
D

DavidF

M

Max Patmoy

Dear David F,

Once again we are given mouse over code too complicated for our needs. What
we require is a code to allow a simple rectangular box with a written
message to appear when a mouse goes over a picture or text. For example if
we had a picture of a dog the mouseover effect would produce a rectangular
box with a message live "Our dog Fred". No extra colours, no differing
effects, just a message.

Thanks
Max Patmoy
 
D

DavidF

Well, gosh Max...why didn't you say so <grin>? Try this. In Pub 2000, right
click your picture > Change Frame > Picture Frame Properties > Alternative
text representation/ Text to Display (at the bottom of the screen). Type
'Our dog Fred' in the field > OK. Do a web page preview and hover your mouse
over the image, and you should see the Alt Text. I am afraid I don't know of
anyway to do this with text boxes though...sorry.

DavidF
 
D

DavidF

Max,

I remembered a similar post to yours, and after looking for it realized it
was a post from you:
Best Pictures 11/19/05. In that thread both David Bartosik and I attempted
to answer your questions about both the Alt Tag, and how to get the best
pictures to display on your site. Since then, and since answering this post,
I have done some testing, and have come up with a workaround for perhaps
both your issues.

From my testing I have found that the Alt Tag feature does work in Pub 2000,
but is broken for some reason in Pub 2003. On your site, www.whitebay.co.nz
you can see that you have added the alt tags to your images as they load in
IE (plenty of time to see when you are using a dial up connection). However
after loading and on mouseover, the tags do not work. Also the images that
do load are a bit blurred and lacking in definition.

To get better images, and to get the alt tags to work in Pub 2003 requires a
bit of work and as David B. said, perhaps having the alt tags are really not
that important, so you might decide it isn't worth it. If you do, here is a
way.

Instead of embedding your images, you need to import then into your site
using the insert html code fragment feature. Here is an article by David
Bartosik that describes the process...just ignore the reference to Pub 2000.
http://www.publishermvps.com/Default.aspx?tabid=84

Here is an example of the code snippet you would insert into your Pub doc
for each image:

<IMG SRC="http://www.whitebay.co.nz/images/yourimage.jpg" ALT="Whatever you
want the alt tag to say" border="0" width="120" height="60">

For this to work properly, I have assumed that you will create a folder on
your site called 'images'. You will optimize and size your images in your
image editing software before you upload them to your 'images' folder, and
change the width and height within the code snippet to the size of your
images. You will change 'yourimage.jpg' to whatever you name your image,
along with the extension. You will change the Alt text to whatever you want
to read on mouseover describing the image. As per the border, if you change
0 to 1, 2 etc, you do get a border, but I do not know enough about coding to
tell you how to apply a specific color to that border, so perhaps go to
www.htmlgoodies.com and learn it there...or accept what you get, or don't
use a border to keep this process as simple as possible. You'll also have to
play around with the size and placement of your code fragment box, and I
can't guarantee that you will get things to line up correctly. However, you
will get your alt tag to work, and you will probably get a better quality
representation of your original image than what you get through embedding
the image in the Pub page. And....be sure to try this on a test page before
you start changing your whole site. It works for me, but it might not work
for you....back up, back up, back up.

Please post back with your results. There was another post today asking
about alt tags, and perhaps your testing could help that poster, and I would
like the feedback. Thanks.

DavidF
 
M

Max Patmoy

Dear DavidF
I have half completed your suggestion and it works a treat. On my front page
www.whitebay.co.nz I have relinked the logo and pictures and put in
mouseovers (hurray). The links go to the exiting pictures publisher uploaded
to the server. By the way I had to delete the measurements,as this cropped
the photo.
The code I used is as follows:
<IMG SRC="http://www.whitebay.co.nz/index_files/image1078.jpg" ALT="Front
view of Whitebay World of Lavender in the peak of summer">
I did tweak the sky (bluer) and the picture is a LITTLE bit clearer. I will
look at putting in a revamped picture (courtesy of Photoshop) as my next
project and post the results. I am not unhappy with what I have and wonder
if a clearer picture will be more size and thus slower loading?
Many thanks David.

Max Patmoy
 
D

DavidF

G'day Max,

Thanks for the feedback. Its good to hear that it is working for you.

I am not sure you have to use the measurements in the code
snippet...obviously..., but if you didn't change them to match the size of
your image, then yes, it would crop the image.

I can tell by looking at your logo on your home page as compared to how it
looks on pages where it is embedded, that it is more clear. As to the other
images, that will depend on your skill with Photoshop and perhaps the
quality of your original image. I get better results now that I use a good
digital camera, than when I started with a print camera and scanned in the
images and tried to tweak those.

As to size and loading time, I THINK that if you size and 'optimize' the
image in Photoshop and import it into your page, that you will probably find
that it will load more quickly, than if you embedded it. However if you are
happy with the images and the way they load on a particular page, then
perhaps don't go to the trouble of redoing the page and importing the
images. You could always test it. Just remember that the higher the
quality/resolution and the bigger the size/dimensions, of the image, the
slower it will load.

If you import the same image on another page, such as your logo, that image
will load more quickly the second time, as you have already downloaded it to
your temp folder on your computer by viewing the first page. The browser
will 'remember' that it downloaded it before and just grab it from the temp
folder rather than download it again. In that case, importing your image
will be more efficient than embedding it. That was the point of the article
by David Bartosik.

Thanks again for taking the time to post the feedback. I was hesitant to
suggest this workaround, as I have had some unpredictable results using the
insert html code fragment in terms of spacing etc., and I was concerned that
I might make matters worse for you.

DavidF
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top