[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 623
  • Last Modified:

RollOver Java Script: Sample Interpretation

Following up on b0lsc0tt's rollover Java script example below:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_22765544.html?sfQueryTermInfo=1+10+netflix+rollov

Could you comment of how a SECOND, additional, rollover link and associated Div text could be added here.  I'm definitely a Java beginner and not understanding how multiple links and multiple associated text is referenced.  i.e. How links and associated text blocks are associated.

The easiest way for me would be to see an example of a second link ("2222") and an associated Div text ("2text, 2text, 2text") added to the example below.

Many Thanks, Jacob

This is very helpful!  I'll check back in the AM.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Show/Hide the div</title>
 
<script type="text/javascript">
<!--
function changeDiv() {
      var div = document.getElementById("hiddenDiv");
      div.style.display = (div.style.display=='none')? '':'none';
}
//-->
</script>
</head>
 
<body bgcolor="Background">
<h3>Hide/Show the div</h3>
<p>Run your mouse over the link below to see the surprise. &#169;</p>
<a href="#" onmouseover="changeDiv();" onmouseout="changeDiv();">The magic link</a>
 
<div id="hiddenDiv" style="display: none; background-color: #ffff99; width: 50%;" onmouseover="changeDiv();" onmouseout="changeDiv();">
asdfasdf asdfadsf adsadsfadsf adsf asfd adsf asdf asf adsf asdf asdf asdf asdf asd fasfd asdf asdf asf
asdfasdf ads fasdfasdf ads fasdf asd asdf asdf asdf asdfasdf asdf asd fsadf asdf adsf afds asfd dsaf
adsfa asd fasd fads fas fasdf asf ad fas df
</div>
</body>
</html>

Open in new window

0
Chi Is Current
Asked:
Chi Is Current
1 Solution
 
Sreedhar VengalaCommented:
This should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<title>Show/Hide the div</title>
 
<script type="text/javascript">
<!--
function changeDiv(a) {
      var div = document.getElementById(a);
	  
      div.style.display = (div.style.display=='none')? '':'none';
}
//-->
</script>
</head>
 
<body bgcolor="Background">
<h3>Hide/Show the div</h3>
<p>Run your mouse over the link below to see the surprise. &#169;</p>
<a href="#" onmouseover="changeDiv('hiddenDiv');" onmouseout="changeDiv('hiddenDiv');">The magic link</a>
<a href="#" onmouseover="changeDiv('hiddenDiv2');" onmouseout="changeDiv('hiddenDiv2');">2222</a>
 
<div id="hiddenDiv" style="display: none; background-color: #ffff99; width: 50%;" onmouseover="changeDiv('hiddenDiv');" onmouseout="changeDiv('hiddenDiv');">
asdfasdf 
 
</div>
<div id="hiddenDiv2" style="display: none; background-color: #ffff99; width: 50%;" onmouseover="changeDiv('hiddenDiv2');" onmouseout="changeDiv('hiddenDiv2');">
2text, 2text, 2text
</div>
</body>
</html>

Open in new window

0
 
Chi Is CurrentAuthor Commented:
sree_ven ~

Thank you for your reply.  Your example explains a lot and answers my question exactly.

Best Regards, Jacob
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now