Welcome to WebmasterWorld Guest from 220.127.116.11
Forum Moderators: open
Hope you can help. I am designing a site for a friend and she wants the following:
A circle at the top of the sitemap page which is an image map divided into 7 sections. Each section is relevant to one of the sections on the site so onclick the user is taken to the appropriate section. However, on mouseover she wants information about that particular section of the website to be shown at the bottom of the screen. It's about 6 lines text, an image and direct links to everything in that section.
Have got as far as using two horizontal frames (top one for image map and bottom for text) but am now stymied how you tell it to pull up the appropriate text in the bottom frame on mouseover without having to:
a) put together 7 different pages and call a new page into the bottom frame for each mouseover on each section, or
b) converting text, image and links for each section in the bottom frame into one image (be difficult for maintenance in the future as new pages are added.)
Can anyone please help?! (I hope this is clear.)
Thank you in advance for solving this problem for us.
I'll sticky-mail you the URL of a page that uses image roll-overs which should serve your purpose. The image you curse over changes as does a seperate "holder" image. You can place the "holder" image anywhere you want. The script is in the HEAD of the page.
The only way to dynamically change text on the client (in the browser) AND be fully browser compatible (darn NN4) is to use form textboxes/textareas. Example:
document.form.textbox.value = text;
<a href="#" onMouseOver="changeText('look!')">mouse over me</a> ¦
<a href="#" onMouseOver="changeText('it\'s changing')">me too</a>
Far more powerful are the abilities offered by the superior DOM of IE4+ & NN6. These browsers allow you to change the inner HTML of any chosen element using the .innerHTML property. Example:
document.getElementById('textlet').innerHTML = text;
var sHTML = "<ul><li>advanced formatting</li><li>or what?</li></ul><form><input type='text' value='I can even draw form elements' size='30'></form>"
<a href="#" onMouseOver="changeText('Wow isn\'t this <b>amazing</b>')">mouse over me</a> ¦
<a href="#" onMouseOver="changeText('I can even change the formatting using <i>HTML</i>')">me too</a> ¦
<a href="#" onMouseOver="changeText(sHTML)">This one's cool</a>
<div id="textlet">This is where your text will appear</div>
Cut and paste the above examples into your editor and preview them in your browser to see what happens.
Both methods mean you don't need to use frames.
Let me know if you need any help with any of the above.
Use tables... Frames look ugly, hurt search engine ranking and make it really hard for visitors to bookmark specific pages. Probably doesn't matter all that much for your friends site but it's better to avoid them anyway.
Also, from my experience there is no reason to worry about NN4.x compatibility anymore. The percentage of people using it is way down and dropping. The people who are still using it are very very used to websites that don't fully support it. All that will happen is that they won't see your mouseover text, everthing else will continue to work.
Nothing personal joshie :-) It's just that post-AOL netscape was probably the worst browser ever created in terms of being hard to design for. On top of that it's full of really stupid rendering bugs.
I figure the quicker we all stop supporting it the quicker the remaining 5% (probably less by the time I post this) will give up on it.