Member Avatar for QWaz

Hi,
I'm a real javascript newbie, good with php.

I am trying to utilize onmouseover, and onmouseout with div's and text.

the goal is: when you hover over some text in a <div> it displays other text and then if you hover off it, it keeps the text there. It's exactly like the home page for mint.com if thats helps explain it.

Not sure how to write the function that shows one div when another is hovered.

What I have got to so far is:

function toggle(id,id){
    d=document.getElementById(id);
    d.innerHTML=document.getElementById(id);
}


<a href="" onmouseover="toggle('thetext1','thetext')" onmouseout="toggle('thetext1','thetext1')">Hover Here</a>

<div id="thetext">
Text in here with other divs to style it. 
</div> 

<div id="thetext1">
Text in here with other divs to style it.
</div>

Not sure if I am close or way off.
Thanks for you help.

Cheers,

Qwaz

  • 3 Contributors
  • 2 Replies
  • 260 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Airshow
Member Avatar for Taywin

Qwaz:

The way you implement javascript argument is ambiguous. You must not have the same argument name, or the script will not know which argument you are calling. In this case, you have 2 of id arguments in your function definition.

Do the div 'thetext' and 'thetext1' have their own style with text inside? Or only text inside has its own style? You could, however, utilize CSS to it instead. One way to do it is to hide all your contents you want to select for display inside a hidden div. Then, you use the toggle to replace innerHTML to whatever you want including the style of it. An example is below.

// CSS part
<style type="text/css">
div.style1 {
  /* add your style here */
}
div.style2 {
  /* add your style here */
}
div.noShow {
  display: none;
  visibility: hidden;
}
</style>

// JavaScript part
<script type="text/javascript">
function toggle(aTag, divId) {
  var el = document.getElementById(divId)
  if (el) {  // element exist
    aTag.innerHTML = el.innerHTML
    aTag.className = el.className
  }
}
</script>

// HTML part
<a href="" onmouseover="toggle(this, 'thetext1')" onmouseout="toggle(this, 'thetext2')">Hover Here</a>
<div class="noShow">
  <div id="thetext1" class="style1">
  Content of text 1
  </div>
  <div id="thetext2" class="style2">
  content of text 2
  </div>
</div>

Normally, I would not do it this way. Because the text display is a constant (never change), I usually pass text to the function right away. However, in your case, it looks like you want to have different style on the text. This could also achieve by using span tag, and then the code would be a bit different.

Edited by Taywin because: n/a
Member Avatar for Airshow

QWaz,

Something like this maybe:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
#explainWrapper {
	width: 300px;
	height: 60px;
	padding: 2px;
	border: 2px solid #336699;
}
.explain {
	display: none;
	font-family: verdana;
	font-size: 10pt;
}
.explain h2 {
	margin: 0;
	background-color: #336699;
	color:#fff;
	text-align:center;
	font-size: 14pt;
}
.explain p {
	margin : 3px;
}
ul.horiz {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.horiz li {
	display: inline;
	padding-right: 2px;
}
ul.horiz li a {
}
ul.horiz li a {
	text-decoration: none;
	padding: 0 15px;
	color: #ccddff;
	background-color: #336699;
	font-family: verdana;
	font-size: 10pt;
}
ul.horiz li a:hover {
	color: #fff;
}
</style>

<script>
function show(id){
	var wrapper = document.getElementById('explainWrapper');
	if(wrapper) {
		var items = wrapper.getElementsByTagName('div');
		for(var i=0; i<items.length; i++) {
			items[i].style.display = (items[i].id === id) ? 'block' : 'none';
		}
	}
}

onload = function(){
	show('explain1');
}
</script>
</head>

<body>

<div id="explainWrapper">
	<div class="explain" id="explain1"><h2>Title 1</h2><p>Text 1 Text 1 Text 1 Text 1 Text 1.</p></div>
	<div class="explain" id="explain2"><h2>Title 2</h2><p>Text 2 Text 2 Text 2 Text 2 Text 2.</p></div>
	<div class="explain" id="explain3"><h2>Title 3</h2><p>Text 3 Text 3 Text 3 Text 3 Text 3.</p></div>
</div>

<ul class="horiz">
	<li class="first"><a href="" onmouseover="show('explain1')" onclick="return false">Item 1</a>
	<li><a href="" onmouseover="show('explain2')" onclick="return false">Item 2</a>
	<li><a href="" onmouseover="show('explain3')" onclick="return false">Item 3</a>
</ul>


</body>
</html>

Airshow

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.