I resolved the mouse-over effect I wanted to achieve on my developing website last year: namely, having an image pop up when the mouse was passed over a trigger word in the text that was printed in blue. To achieve this, I superimposed the same blue word over the word in the text, using this superimposed word as the trigger. Recently, somebody pointed out to me that when they opened my 24-hour trial website with a different web browser to mine, some of the trigger words were out of alignment with their corresponding text words.

I resolved this problem by replacing the superimposed blue trigger words with blank rectangles, making sure to set their borders at zero thickness and setting maximum transparency so they were completely invisible. I conducted a few test runs and this method worked perfectly. Then I set about replacing all the triggers on my website (which is nearing completion). When I published this on the 24-hour trial, I was surprised to find that the desired effect was achieved in very few instances. The hidden images popped up in every case--the problem was that the blue text words were overwritten and illegible. In some instances they were overwritten with letters, other times with fragments of images. What is going on??

I have published one page of the website, which can be visited at http://trialsites.ihostvm.com/...site/KingArthur.html

Any suggestions will be most gratefully received.

Many thanks,

Chris McGowan

Your blank rectangles are not really transparent -- they are picking up part of the background from your workpage. This is happening at the time SiteSpinner creates the rectangle image -- on preview or publish. Because of variations in the way that browsers align text, the text displays don't exactly match what you have on your workpage.

Three fixes:
1. Use GIF format for the rectangles -- this gives an automatic transparent background; or
2. In the Geometry Editor, set Render Background off for each image; or
3. In Options > Project Options > General tab, set "Include Background" off. This may upset other images in your project which may need the background.

Dear Bruceee,

Many thanks for your suggestions--I'll give them a try. You are a remarkable source of information, as always.

Cheers,

Chris

Thanks again Bruceee. The problem was resolved using your first option of going to the geometry editor and selecting GIF from the options tab. Simple and effective. This is a great way to achieve a mouse-over.

I've now got another problem...Is there any way of removing the tiles from a page once they have been put in place?

Very best regard,

Chris

If you are talking about a tiled background, open the Page Editor->Background tab and click the Solid button.

Dear Bruceee,

I've just made an unfortunate discovery: fixing my mouse-over problem using GIF format rectangles only works when the objects on the page are left ungrouped. When I group them and preview the page, I get the same overwriting problem as before. Why is this? Can I leave the pages ungrouped or will that present problems when I publish the website?

I attempted the second of the three fixes--using the geomtry editor--but couldn't see how to set "render background" off. Sorry, I'm not very good at all this.

Thanks in anticipation,

Chris

Hi Chris. I’m a bit like you, I get very confused with rendering, re-rendering, anti-alias etc.

I had a similar problem as yours for handling mouse effects for grouped objects, and eventually overcame the problem with some javascript. You could use the same idea, but in reverse.

Feel free to use the following code example, simply changing the object’s ID number to suit the object ID of your image. Copy and paste blocks of code to add extra objects if required.

Open the Link Editor for the group that triggers the event. Leave the Link Type blank, place

javascript:void(0);

in the URL section, then in the code box, put

onMouseOver=”showHideObject();”

On the image that pops up, you will need something like

OnClick=”showHideObject()”

to hide the image again.

Use the same function for both events as the code checks to see if the object(s) are visible, shows it if it (they) aren’t, or hides it if it (they) are.

<script language="JavaScript">
function showHideObject() {
	document.getElementById("Oobj45").style.display = "";
	if(document.getElementById("Oobj45").style.visibility == "hidden" ) {
		document.getElementById("Oobj45").style.visibility = "visible";
	}
	else {
	document.getElementById("Oobj45").style.visibility = "hidden";
	}
	}
</script>

quote:

Originally posted by Chris McGowan:
I've just made an unfortunate discovery: fixing my mouse-over problem using GIF format rectangles only works when the objects on the page are left ungrouped. When I group them and preview the page, I get the same overwriting problem as before. Why is this? Can I leave the pages ungrouped or will that present problems when I publish the website?

When you make a group, you have a choice of making a new image or not. For the group, in the Quick Editor > Object tab, try setting Anti-Alias and Re-Render off (for no new image). Or you might try setting GIF format for the group image.

quote:

I attempted the second of the three fixes--using the geomtry editor--but couldn't see how to set "render background" off.

Select the object an open the Geometry Editor > Options tab -- the Render Background checkbox is there.

The third option in the project settings may not be available in your version of SiteSpinner, but it is available in the latest version. Hint, hint You can easily download it via Help > Check for Updates.

Thanks again Bruceee, I appreciate all your help. I'll give these a try. And I'll check for updates.

Cheers,

Chris

I've just seen the suggestion by Postyr. Thank you for sharing your code with me. I've never tried using JavaScript before--creating a website is proving to be a real learning experience.

Chris

quote:

Originally posted by larryd:
If you are talking about a tiled background, open the Page Editor->Background tab and click the Solid button.

Thanks for this Larryd.

Chris

Dear Bruceee,

I've had no success resolving the transparent rectangle mouse-over trigger problem. First, I tried using the GIF format for the rectangle. Then I tried setting the render background off for the rectangle. But each time some of the triggers had superimposed lettering, or parts of images.

However, everything works okay if I keep the page ungrouped before publishing a trial. Is there any reason why I shouldn't simply leave the pages ungrouped, or does that cause problems elsewhere?

I would appreciate your words of wisdom,

Chris McGowan

There's no particular reason why you have to keep sets of objects grouped. The advantage is that it keeps them all together, and makes copying easier. The disadvantage is that it makes individual objects of the group harder to edit. You might try locking the objects instead -- that will keep them in place.

If you find that ungrouping solves your much more serious problem, then leave them ungrouped.

With mouseovers, simple is best. You seem to still have a render background on for something -- that is probably why the background is is still showing. If it happens only when you group, make sure you have Anti-Alias and Re-Render off for the group Object (Quick Editor > Object tab.)

Dear Bruceee,
Many thanks for this--I was hoping that keeping the page ungrouped would not cause other problems. Simple is always best, and this is certainly the easiest solution to my perennial mouse-over problem.

Appreciatively yours,

Chris