Solved

making div content appear on mouse over and stay there until another link moused over

Posted on 2008-06-25
2
2,640 Views
Last Modified: 2012-08-13
Hello,
my first question to the experts so please go easy if i post the code wrong!

i am developing a site which has several links that when moused over make some content appear in a div elsewhere on the page. I have it working fine (not tested in IE yet) but i want the content to remain in view when the user mouses out but then be replaced by the new content when a user mouses over another link.

css, javascript and one of the links and its corresponding hidden content below

any help gratefully received!! :)

jon
css:
 

#LinkagesLink {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #669900;

width:210px;

height:auto;

float:left;

margin:10 0 0 0px;

text-decoration:none;
 

}
 

#LinkagesLink a {

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #669900;

width:210px;

height:auto;

float:left;

margin:0 0 0 0px;

text-decoration:none;
 

}
 

#class1 {

position:absolute;

Width:220px;

height:auto;

float:right;

z-index: 2;

visibility: hidden;

}
 
 
 
 
 
 

<script language="JavaScript">
 

function box (boxname,menustate){
 

if (document.getElementById)

{document.getElementById(boxname).style.visibility = menustate;}
 

else {document[boxname].visibility = menustate} }
 

</script>
 
 
 

<div id="LinkagesLink">

<a href="javascript://"onMouseOver="box('class1','visible')" onMouseOut="box('class1','hidden')"><h3>Linkages</h3>

<img border="0" src="../images/buttons/buttonlinkages.jpg"></a>
 

</div>
 
 

 <div id="class1"><h3>Linkages</h3>

	

<p class="newsfeedtext">I have this same menu on a different page and I need whatever link i push on to direct me to this page I have typed above and also have the "magical text" showing depending on which ever link I clicked. Is that clear? Hopefully so!</p></div>

Open in new window

0
Comment
Question by:jonsmithgraphics
2 Comments
 
LVL 1

Accepted Solution

by:
bakuretsu earned 500 total points
ID: 21865267
What I've done is sort of re-work your idea from scratch. Let me try to explain why I took this approach.

The basic idea is to show the appropriate element when you mouse over a link and hide the rest (in case another was previously still showing). The easiest way to do that is to simply hide all elements first, and then show the one you want. JavaScript is usually fast enough that you don't even know it happened in that order.

hideAllBoxes() is a function that gets all the DIV elements on the page and loops through them looking for ones that have an ID attribute that starts with "link_". Change this to be whatever you want.

showBox() is a function that shows only the box for the link you are hovering over with your mouse. This is based on the number at the end of "link_", so it just concatenates the number you pass it onto the end, e.g. "link_2".

This should get you started in the right direction. I also highly recommend looking into some of the JavaScript frameworks such as prototype (www.prototypejs.org) and jQuery (www.jquery.com).
<script language="JavaScript">

	function hideAllBoxes() {

		var b = document.getElementsByTagName('DIV');

		for(var i=0;i<b.length;i++) {

			var div = b[i];

			if(div.id.match(/^link_/)) {

				div.style.display = 'none';

			}

		}

	}

	

	function showBox(id) {

		var b = document.getElementById('link_'+id);

		hideAllBoxes();

		b.style.display = '';

	}

</script>
 

<style type="text/css" media="screen">

	div.box { border: 1px solid silver; width: 200px; }

</style>

	

<a href="" onmouseover="showBox(1);">Link 1</a>

|

<a href="" onmouseover="showBox(2);">Link 2</a>

|

<a href="" onmouseover="showBox(3);">Link 3</a>
 

<div id="link_1" style="display:none;" class="box">

	<h3>Link 1</h3>

	<p class="newsfeedtext">This box contains information about Link 1.</p>

</div>
 

<div id="link_2" style="display:none;" class="box">

	<h3>Link 2</h3>

	<p class="newsfeedtext">This box contains information about Link 2.</p>

</div>
 

<div id="link_3" style="display:none;" class="box">

	<h3>Link 3</h3>

	<p class="newsfeedtext">This box contains information about Link 3.</p>

</div>

Open in new window

0
 

Author Closing Comment

by:jonsmithgraphics
ID: 31470525
thanks bakuretsu!!!!
works a treat and seems much less code than my cobbled together version.

cheers :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

932 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now