homepage Welcome to WebmasterWorld Guest from 54.224.75.101
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library : Charter : Moderators: whoisgregg

JavaScript and AJAX Forum

    
Javascript (maybe) problem
cybersavvy




msg:1488418		 1:03 am on Nov 7, 2001 (gmt 0)

Hello All

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.

Lindsey

 

Marshall




msg:1488419		 5:06 am on Nov 7, 2001 (gmt 0)

cybersavvy,

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.

joshie76




msg:1488420		 1:20 pm on Nov 9, 2001 (gmt 0)

Welcome to WebmasterWorld cybersavvy.

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:


<html>
<head>
<script>
function changeText(text)
{
document.form.textbox.value = text;
}
</script>
</head>
<body>
<a href="#" onMouseOver="changeText('look!')">mouse over me</a> ¦
<a href="#" onMouseOver="changeText('it\'s changing')">me too</a>

<form name="form">
<textarea name="textbox"></textarea>
</form>
</body>
</html>

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:


<html>
<head>
<script>
function changeText(text)
{
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>"
</script>
</head>
<body>
<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>

</body>
</html>

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.

cybersavvy




msg:1488421		 7:10 pm on Nov 9, 2001 (gmt 0)

Thank you both. Great help, think I can probably do it now.
IanKelley




msg:1488422		 9:00 am on Nov 11, 2001 (gmt 0)

Just thought I'd add something... Don't use frames. There is nothing good about them. ;-)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved