MS Office Forum / Publisher / Web Design / December 2005
How do I create mouse overs for web documents?
|
|
Thread rating:  |
loomis - 29 Nov 2005 19:36 GMT 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"?
DavidF - 30 Nov 2005 02:57 GMT 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
> 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"? Max Patmoy - 05 Dec 2005 18:41 GMT Dear David,
Can you give us the easiest basic script for a plain mouseover. All the "Googled" scripts are too complicated.
Max Patmoy
> 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 [quoted text clipped - 6 lines] >> 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"? DavidF - 05 Dec 2005 19:24 GMT Max,
Of course it depends on what effect you want, but if you want a simple color change then David Bartosik has a simple one I have used on his FAQ page about half way down: http://www.publishermvps.com/WebDesign/FAQ/tabid/30/Default.aspx
The #ffffff is the HTML hex value, and I was able to figure out different hex values of different colors using the pixie color picker...a great little freebie, and a small download at: http://www.nattyware.com/pixie.html
DavidF
> Dear David, > [quoted text clipped - 13 lines] > >> 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"? Max Patmoy - 06 Dec 2005 18:19 GMT 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
DavidF - 06 Dec 2005 21:21 GMT 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
> Dear David F, > [quoted text clipped - 7 lines] > Thanks > Max Patmoy DavidF - 08 Dec 2005 15:20 GMT 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
> Dear David F, > [quoted text clipped - 7 lines] > Thanks > Max Patmoy Max Patmoy - 11 Dec 2005 23:27 GMT 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
> Max, > [quoted text clipped - 85 lines] >> Thanks >> Max Patmoy DavidF - 12 Dec 2005 00:48 GMT 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
> Dear DavidF > I have half completed your suggestion and it works a treat. On my front page [quoted text clipped - 102 lines] > >> Thanks > >> Max Patmoy
|
|
|