Solved

Simple Javascript Issue

Posted on 2007-12-02
2
178 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Batch, VBS, and scripts in general are incredibly useful for repetitive tasks.  Some tasks can take a while to complete and it can be annoying to check back only to discover that your script finished 5 minutes ago.  Some scripts may complete nearly …
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
The viewer will learn how to count occurrences of each item in an array.

772 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