Solved

Simple Javascript Issue

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn how to count occurrences of each item in an array.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

762 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

21 Experts available now in Live!

Get 1:1 Help Now