Solved

Simple Javascript Issue

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

839 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