JavaScript - Switch Image On Expanded Content.

Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/

Code:

<script type="text/javascript">
// <![CDATA[
	
	// show the popup
	function show_popup(UserID) {
		if(http_getuser) { 
			
			//get user data and show popup
			sendRequest(UserID);
		}
	}
	
	// hide the popup
	function close_popup() {
		document.getElementById('popup').style.display='none';
	}
	
	// Make the request
	function createRequestObject() {
		if(window.XMLHttpRequest){
			ro = new XMLHttpRequest();
		} else if(window.ActiveXObject) {
			ro = new ActiveXObject("Msxml2.XMLHTTP");
			if(!ro) {
				ro = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		return ro;
	}
	
	//Create Request Variables
	var http_getuser = createRequestObject();
	
	//Send Request for user info
	function sendRequest(UserID) {
		var userinfo_url = '{AJAX_USERINFO_PATH}';
		http_getuser.open('get', userinfo_url.replace('USERID', UserID));
		http_getuser.onreadystatechange = handleResponse;
		http_getuser.send(null);
	}
	
	// fill in the response
	function handleResponse() {
		if(http_getuser.readyState == 4 ){
			var xmlDoc = http_getuser.responseXML;
			if(xmlDoc.hasChildNodes()) {
				document.getElementById('ajax_username').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
				document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
				document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
				document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
				document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
				document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
				document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
				document.getElementById('ajax_avatar').innerHTML = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue;								//document.getElementById('ajax_add').innerHTML = xmlDoc.getElementsByTagName('add')[0].firstChild.nodeValue;
				
				//Apply style which makes profile info visible
				document.getElementById('popup').style.display='block';
				
				//Get height of popup
				var getRefById = function() {return null;};

				if(document.getElementById) {
					getRefById = function(i) {return document.getElementById(i);};
				} else if(document.all) {
					getRefById = function(i) {return document.all[i] || null;};
				}

				var d = getRefById('popup'), h = '0px', o;

				if(d) {
					if((o = document.defaultView) && o.getComputedStyle) {
						h = o.getComputedStyle(d, null).height;
					} else if('number' == typeof d.offsetHeight) {
						h = d.offsetHeight + 'px';
					}	
				}
				// 'h' should now contain the height of 'myDiv', or 0px
				//alert(h);
				//make room for popup
				document.getElementById('test').style.height= h;
			}
		}
	}
	
	// set popup to mouse possition
	function set_div_to_mouse(e) {
		//Make x and y cord vars
		var docX, docY;
		//get page info
		 if(e) {
			if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
			else {docX = e.clientX; docY = e.clientY;}
		//vert
		} else {
			e = window.event;
			docX = e.clientX; docY = e.clientY;
			if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
				docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
			}
			else if(document.body && (document.body.scrollTop || document.body.scrollLeft)) {
				docX += document.body.scrollLeft; docY += document.body.scrollTop;
			}
		} 
		//hor
		if (docX > document.body.offsetWidth - 400) {
			document.getElementById('popup').style.left = (docX - 350) + "px";
		} else {
			document.getElementById('popup').style.left = (docX - 5) + "px";
		}
		document.getElementById('popup').style.top    = (docY + 30) + "px";
	}
	//document.onmousemove = set_div_to_mouse;
// ]]>

</script>

<div id="test">
<div class="forabg" id="popup" style="width: 90%;">
   <div class="inner">
      <span class="corners-top"><span></span></span>
      <ul class="topiclist fullwidth">
         <li class="header"><dl><dt>{L_READ_PROFILE}</dt></dl></li>
      </ul>
      <ul class="topiclist forums">
         <li><dl>
            <dd style="width:100%">
                <table>			   <tr>			   <td><div id="ajax_avatar"></div></td>			                  <td><strong>{L_USERNAME}:</strong> <span id="ajax_username"></span><br />               <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br />               <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br />               <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br />               <strong>{L_LAST_VISIT}:</strong> <span id="ajax_last_visit"></span><br />               <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br />               <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br/>			   <span id="ajax_add"></span>			   </tr>			   </table>
               <br/ style="clear: both;">
            </dd>
         </dl></li>
      </ul>
      <span class="corners-bottom"><span></span></span>
   </div>
</div>
</div>

When my code hits line 80, the height of a div tag is increased to make room for expanding content, so that the new content does not overlap already existing content. When the div tag's height increases, this increases the overall page height. When the page height increases, then the scroll bar stays in the same place, but the page position changes in the browser. Is there anyway to prevent the viewer's position from changing when room is made for the expanding content?

Hello,
I'm new to this forum and well... I'm pretty new to JavaScript as well.
Here's my problem: I'm trying to create a switch image code that will allow the new image to be a link as well. In the list item where you'll see ('blue.jpg') if I try to make this an anchor tag - it breaks the code. Any suggestions would be great.
Thanks for taking a look!

Code:

<head>
	
	<script>
	function switch1(div) {
	if (document.getElementById('blue')) {
	var option=['blue','green','purple'];
	for(var i=0; i<option.length; i++)
	{ obj=document.getElementById(option[i]);
	obj.style.display=(option[i]==div)? "block" : "none"; }
	}
	}
	//
	function switchImg(i){
	document.images["blue"].src = i;
	}
	</script>
	
	<style>
	#image-switch ul {
	margin:0 0 0 20px;
	color:red;
	list-style-type:none;
	}
	#image-switch li {
	padding:10px;
	}
	#image-switch #green, #image-switch #purple {
	display:none;
	}
	#radiobs {
	width:150px;
	position:relative;
	margin:0;
	}
	#radiobs input {
	margin:0;
	padding:0;
	position:absolute;
	margin-left:6em;
	width:15px;
	}
	
	</style>
	
	
	
	
</head>


<div><img src="blue.jpg" id="blue" /></div>

<ul id="radiobs">
<li><a href="#n" onclick="switchImg('blue.jpg')"><img src="sample_box_1_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('green.jpg')"><img src="sample_box_2_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
<li><a href="#n" onclick="switchImg('purple.jpg')"><img src="sample_box_3_fpo.jpg" width="30" height="30" alt="Sample Box 1 Fpo"></a></li>
</ul>

</div>
<div class="clear"></div>

I know theres a lot of codes out there online for this but I cannot seem to get any of them to work for me. I am trying to make my layout for an item page for an online store. I'd like one big image, with one or 2 thumbnails under it which when clicked will switch the big image. Clicked, not mouseover.

Lets say my big images would be REG1.jpg and REG2.jpg, the first being the image on the page that will switch. THUMB1.jpg and THUMB2.jpg being the thumbnails.

Is there a simple way to do this or is the code a complete mess like I've been seeing on so many pages? I'd say I have an intermediate understanding of HTML and I've just started teaching myself javascript but I'm starting to fall off the wagon, I can't decipher the stuff coming up in these example codes.

Any help would be thoroughly appreciated!!

My goal is to have one big picture center with 4 smaller pictures to the left that you click on and is target to the center. When you click on the center it will zoom. I haven't worked on it in a few years and not able to find the person who wrote the code. I added the zoom coding to the picture switch. The zoom works fine but when you click the smaller images the image is not viewable.

Coding in the head

Code:

<!--Image Viewer-->
	<script language="javascript" type="text/javascript">
<!--

function canManipulateImages() {
	if (document.images)
		return true;
	else
		return false;
}

// loadPosterImage

function loadPosterImage(imageURL) {
	if (gImageCapableBrowser) {
		document.imagePoster.src = imageURL;
		return false;
	}
	else {
		return true;
	}
}

gImageCapableBrowser = canManipulateImages();

// -->
</script>
<!--End Image Viewer-->


<!--Picture Zoom-->
<script>
// C.2004 by CodeLifter.com
var nW,nH,oH,oW;
function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){
oW=whichImage.style.width;oH=whichImage.style.height;
if((oW==iWideLarge)||(oH==iHighLarge)){
nW=iWideSmall;nH=iHighSmall;}else{
nW=iWideLarge;nH=iHighLarge;}
whichImage.style.width=nW;whichImage.style.height=nH;
}
</script>
<!--End Picture Zoom-->

The body code

Code:

<!--Picture #4-->
<tr>

	<td><A href="F:\mamies\santa_pic\purple_bottom.gif"
		   onClick="return(loadPosterImage('F:\mamies\santa_pic\purple_bottom.gif'))">
		<img src="F:\mamies\santa_pic\purple_bottom.gif" 
			   border=1 align=center width=56 height=75></A>
	 </td>


</tr>
</table>

	<table align="center" border="1" cellspacing="0" cellpadding="5" height="10" bgcolor="#002152" bordercolor="#980008">

<tr>

<!--Image Zoom-->
	<td><img name="imagePoster" src="F:\mamies\santa_pic\purple_front.gif"
border="0" 
width="354"
height="502"
onclick="zoomToggle('354px','502px','708px','1004px',this);">
<!--End Image Zoom-->

Thanks for your help

Charlene

Example of my problem:
HERE

The code is derived from a site offering some advice for javascript:
HERE

The example of mine tries to use an image as hyperlink... and use mouse events for certain actions.

Aside from possibly being the worst javascript code humanly possible...once I slaughtered the code from the site mentioned above, I'm not getting how to arrange things so that a mouse over event switches an image , as does mousedn and mouseup, And (and this is the rub for me) repeating the setup in the same way for a list of quicktime video links.

I've got it to work for one row in the table I'm using to attempt some kind of formatting.

I'm told `css' is a better way for that but I'm completely ignorant about how to use `css'. So, for now I'm using a table to get at the javascript question.

The idea is for viewer to see three red dots at the front of each item being offered.

Mouseover is supposed to switch to a green arrow... mousedn is supposed to switch to 2 check marks. I wanted the check marks to persist, so for lack of knowing how to accomplish that... I let mouseup call the same image. (the check marks; Maybe just omitting any directive for mouseup would have the same effect?)

About the `image persisting after being clicked' question: It is really a separate question so I will probably start a different thread for that.

What I've done works for one list item... but fails for more than one.

The only active member of the list (2 in my example) is the bottom one. mouse events on the top one are carried out on the bottom one.

I tried to just change the name of all variables in the javascript, and the name given in the `img src=' section of the html code, for the second row... but clearly not what is needed. I changed the names shown below by incrementing the number in the names by 1.
I've only posted one row's worth but the next row uses the same code with the variables incremented.

And hopefully someone will look at the actual example (URL given above) and see the full code.

The basic code I've put here for convience.:

Code:

<table>
<tr>
<td valign=top >
<A href="./t2.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" 
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton_0" src="./3dots.png" border="0" 
alt="javascript button"></A> some nice video 
<SCRIPT language="JavaScript">
var myimgobj_0 = document.images["jsbutton_0"];

function changeImage()
{
document.images["jsbutton_0"].src= "./aro1r-mo.png";
return true;
}
function changeImageBack() 
{
 document.images["jsbutton_0"].src = "./3dots.png";
 return true;
}
function handleMDown()
{
	document.images["jsbutton_0"].src = "./checks.png";
	return true;
}
function handleMUp()
{
        document.images["jsbutton_0"].src = "./checks.png";
	return true;
}
</SCRIPT>
</tr>
</td>