Solved

Simple Javascript Issue

Posted on 2007-12-02
2
177 Views
Last Modified: 2008-02-01
Hello, i have a problem that probably has a simple solution but Im not too familary with javascript and cant figure it out.  I have a dynamic number of images on a page.  These images contain this href which makes a div visible:

<a href="javascript:;" onmouseover="menuLayers.show('menu1', event)" onmouseout="menuLayers.hide()">IMAGE GOES HERE</a>

The div that is made visible contains several images users can click on.  What i need to do is change the source of the image the user originally clicked on after he makes a selection from the div that pops up.  Any Ideas?

Here is my complete code:

THE IMAGE THE USER WILL CLICK, ID WILL BE UNIQUE FOR EACH ONE
<a href="javascript:;" onmouseover="menuLayers.show('menu1', event)" onmouseout="menuLayers.hide()"><img id="SearchImage1" src="Images/SearchLogos/Small/Google.jpg" style="border-width:0px;" /></a>

THE DIV THATS MADE VISIBLE
<div id="menu1" class="menu" style="position:absolute; Left: 600px; top: 50px; visibility:hidden; background-color:White;">
<div  align="center" style="width:200px; height:300px; overflow-y:scroll;">
 <div align="center"><span style="font-size: 14pt">Search Engine</span></div><br /><br />
 <img src="Images/SearchLogos/Medium/Google.jpg" onclick="javascript:toggleLayer('Google');" /><br />                
              <asp:RadioButton ID="Google" runat="server" Text="" GroupName="DefaultSearch" /><br /><br />
 <img src="Images/SearchLogos/Medium/Yahoo.jpg"  onclick="javascript:toggleLayer('Yahoo');"/><br />                
                <asp:RadioButton ID="Yahoo" runat="server" Text="" GroupName="DefaultSearch" /><br /><br />
 <img src="Images/SearchLogos/Medium/msn.jpg"  onclick="javascript:toggleLayer('MSN');"/>          
        </div>
</div>



HERE IS MY JAVASCRIPT
<script type="text/javascript">
function toggleLayer(radioButton)
{
    document.getElementById(radioButton).checked = true;
 
      this.timer = setTimeout("document.getElementById('menu1').style.visibility = 'hidden'", 200);
}



var menuLayers = {
  timer: null,
  activeMenuID: null,
  offX: 5,   // horizontal offset
  offY: -30,   // vertical offset
  show: function(id, e) {
    var mnu = document.getElementById? document.getElementById(id): null;
    if (!mnu) return;
    this.activeMenuID = id;
    if ( mnu.onmouseout == null ) mnu.onmouseout = this.mouseoutCheck;
    if ( mnu.onmouseover == null ) mnu.onmouseover = this.clearTimer;
    viewport.getAll();
    this.position(mnu,e);
  },
 
  hide: function() {
    this.clearTimer();
    if (this.activeMenuID && document.getElementById)
      this.timer = setTimeout("document.getElementById('"+menuLayers.activeMenuID+"').style.visibility = 'hidden'", 200);
  },
 
  position: function(mnu, e) {
    var x = e.pageX? e.pageX: e.clientX + viewport.scrollX;
    var y = e.pageY? e.pageY: e.clientY + viewport.scrollY;
   
    if ( x + mnu.offsetWidth + this.offX > viewport.width + viewport.scrollX )
      x = x - mnu.offsetWidth - this.offX;
    else x = x + this.offX;
 
    if ( y + mnu.offsetHeight + this.offY > viewport.height + viewport.scrollY )
      y = ( y - mnu.offsetHeight - this.offY > viewport.scrollY )? y - mnu.offsetHeight - this.offY : viewport.height + viewport.scrollY - mnu.offsetHeight;
    else y = y + this.offY;
   
    mnu.style.left = x + "px"; mnu.style.top = y + "px";
    this.timer = setTimeout("document.getElementById('" + menuLayers.activeMenuID + "').style.visibility = 'visible'", 200);
  },
 
  mouseoutCheck: function(e) {
    e = e? e: window.event;
    // is element moused into contained by menu? or is it menu (ul or li or a to menu div)?
    var mnu = document.getElementById(menuLayers.activeMenuID);
    var toEl = e.relatedTarget? e.relatedTarget: e.toElement;
    if ( mnu != toEl && !menuLayers.contained(toEl, mnu) ) menuLayers.hide();
  },
 
  // returns true of oNode is contained by oCont (container)
  contained: function(oNode, oCont) {
    if (!oNode) return; // in case alt-tab away while hovering (prevent error)
    while ( oNode = oNode.parentNode )
      if ( oNode == oCont ) return true;
    return false;
  },

  clearTimer: function() {
    if (menuLayers.timer) clearTimeout(menuLayers.timer);
  }
 
}
</script>


THANKS VERY MUCH!!
0
Comment
Question by:grogo21
2 Comments
 
LVL 51

Accepted Solution

by:
ahoffmann earned 500 total points
ID: 20394033
<asp:RadioButton

is not a valid HTML tag, hence the assigned attributes with the function cll will most likely not executed
0
 

Author Comment

by:grogo21
ID: 20398239
Any ideas on how i can pass the id of the image the user clicked to then change that image after another election is made?  Thanks
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

I hope you'll find this tutorial useful and interesting. So let's try to extend Tcl with a new package.  For anyone more deeply interested please check out the book "Practical Programming in Tcl and Tk". It's really one of the best written books abo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 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

19 Experts available now in Live!

Get 1:1 Help Now