JavaScript - On Mouseover To Show Smaller Image In Center Of Larger Table Cell.

I have a concatenated list of member names, with corresponding profile pics. I am trying to implement something similar to Facebook, where when you mouseover the picture or member name, another div appears, such as an "x" or "delete link" which lets you click to delete that member.

I tried to implement the a show/hide with the following, but this won't work with me since my list is concatenated, and since you can only have one id per div- this method won't cut it.

So, how can I make this happen?

Non-working Code:
Code:

HTML
           <div >
                <div id="showhide">
                    Line 1
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 2
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 3
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 4
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 5
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 6
                </div>
            </div>
 
Javascript:
<script>
	function mover(){
document.getElementById("visiblediv").style.display="block"
	}
	function mout() {		
document.getElementById("visiblediv").style.display="none"
	}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>			

CSS:
#visiblediv {
	visibility:visible;
	border:1px dotted black;
}

I am trying to make it so when I mouseover on one div another div appears. And when I mouse out, the div disappears again.

Here's what I have, it's not working. Both divs are always showing.
Code:

<script>
function mover(){
    document.getElementById("visiblediv").style.display="block"
}
function mout() {
    document.getElementById("visiblediv").style.display="none"
}
</script>


<div id = "div1" onmouseover="mover()" onmouseout="mout()">
    Show the div
</div>
<div id = "visiblediv" style="visibility:visible;border:1px dotted black">
    This div is visible
</div>

Any way I can make this work any better? Am I supposed to have something in my main.css file?

So i purchased a template from template monster for wordpress.

http://www.templatemonster.com/demo/28861.html

On the front page when you click on the thumbnail it changes the big image in the middle. I can't figure out how for the life of me to make that image also a link.

My main problem is the code below. img_b1.jpg is the full size image and image_1.jpg is the thumbnail image. When you click on the thumbnail it changes the big image in the middle. When I add a clickable href=" to the main image it breaks the whole chain.
---------------------------------------------------------------------
<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>


------------------------------------------------------------------------

Full code below


<div id="thumbs" class="navigation">

<ul class="thumbs noscript">

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b1.jpg" title="Agrocore">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_1.jpg" alt="Agrocore" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b2.jpg" title="ProClinique">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_2.jpg" alt="ProClinique" />

</a>

<div class="caption">

<div class="indent1">in grey</div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b3.jpg" title="Beauty">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_3.jpg" alt="Beauty" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

<li>

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b4.jpg" title="Market">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_4.jpg" alt="Market" />

</a>

<div class="caption">

<div class="indent1">in grey </div>

<div class="image-desc">Luxury living is being redefined and emphasis is being laid on comfortable living, without compromising on style, modest in the color codes</div>

<div class="indent"><h4>Sitting room </h4></div>

</div>

</li>

<li class="last">

<a class="thumb" name="leaf" href="<?php bloginfo('stylesheet_directory'); ?>/images/img_b5.jpg" title="Business">

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/img_5.jpg" alt="Business" />

</a>

<div class="caption">

<div class="indent1">living set </div>

<div class="image-desc">Cool looking but extremely functional and comfortable. The colours black and white dominate throughout.<br />

Sleek and stylish interior to suit your taste.</div>

<div class="indent"><h4>Contemporary</h4></div>

</div>

</li>

</ul>

</div>



</div>

</div>

Hi I am trying to implement a hide/show div, such that when you mouse over a div, another div pop's up below it. Here's what I have so far, but for some reason, only the first div set is working. That is when I mouse over div 1, div 2 shows up. So why isnt it working for divs 3,4 and 5,6? Here's my code:

Code:

            
HTML
           <div >
                <div id="showhide">
                    Line 1
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 2
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 3
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 4
                </div>
            </div>
            <div >
                <div id="showhide">
                    Line 5
                </div>
                <div id="visiblediv" style="display: none;">
                    Line 6
                </div>
            </div>
 
Javascript:
<script>
	function mover(){
document.getElementById("visiblediv").style.display="block"
	}
	function mout() {		
document.getElementById("visiblediv").style.display="none"
	}
document.getElementById('showhide').onmouseover=mover;
document.getElementById('showhide').onmouseout=mout;
</script>			

CSS:
#visiblediv {
	visibility:visible;
	border:1px dotted black;
}

Any ideas, as to why it's not working?

I am creating a page on which I have several div's. They contain an image as background.
When I do a mouseover on a div, I want a div (with an image semitransparant), to be placed ontop of it's hovered div. When mouseout the semitransparant div should be hidden.

Now I have the following code, it does work, but sometimes on mouseout the semitransparant div isn't hidden (when the mouse moves to quick). Is there a solution for it?

PHP Code:
echo '<div id="block-'.$BlockNums.'" class="blok '.$BlockStyle.'" onmouseover="document.getElementById(\'message\').style.display=\'block\';" ><img src="images/'.$BlockImg.'.png" width="181"/></div>';
echo '<a href="'.$BlockLink.'" style="display:block;cursor:pointer;"><div id="message" class="disMessage" style="display:none;" onmouseout="document.getElementById(\'message\').style.display=\'none\';"><p>'.$BlockMouse.'</p></div></a>'; 


And the css:
Code:

.disMessage
{
	width: 163px;
	height: 168px;
	z-index: 1000;
	position: absolute;
	padding: 10px 10px 10px 10px;
	text-align: center;
	background-image: url("../images/hoverTrans.png");
}
.blok
{
	width: 181px;
	height: 186px;
	/*border: 1px solid #FE7701;*/
	background-image: url("../images/blok.png");
	padding: 1px 9px 9px 1px;
}

Thanks

I have an iFrame on which I wish to display scrollbars ONLY when the mouse is over the iFrame AND the source of the iFrame is larger than the iFrame can display

I am using the following code for the iFrame but believe that I need to add some script to make it work:

Code:

<iframe src="http://www.mhgoebel.com" frameborder="0" id="frame" width="320" height="356" scrolling="no">
onmouseover="setScrolling('auto')" onmouseout="setScrolling('no')"
</iframe>

This is what my code is supposed to do:

1. create a select list that changes the photo showing, (which I have)
2. create script so that when the user hovers over the image it shows a div
3. when the users mouse is off the image/div shows the coordinates where it last left
4. on mouseout hides the div again (this is the part I'm stuck on)

This is my html:
Code:

<style>
		#selectdiv
		{
			position:absolute;
			left:10px;
			top:10px;
			width:400px;
			height:400px;
		}
		#mylist
		{
			position: absolute;
			left: 200px;
			top: 100px;
			width:inherit;
			height:inherit;
		}
		#myyellow
		{
			position: absolute;
			left: 600px;
			top: 100px;
			width:300px;
			height:200px;
			background-color:#FF3;
		}
	</style>
<body>
	  <div id="selectdiv">
      <h1 style="font-size:28px">Select a Beatle</h1>
      <select name="beatles" size="1" id="myselect" onchange="showDiv();">
	  		<option value="-">-</option>
            <option value="J">John</option>
            <option value="P">Paul</option>
            <option value="G">George</option>
            <option value="R">Ringo</option>
      </select>
      </div>
      <div id="mylist" style="display:none" onmouseover="showYellow(event);" onmouseout="showpixels(event)"></div>
      <div id="John" style="display:none">
      	<img src="beatles_john.jpg" />
      </div>
      <div id="Paul" style="display:none">
      	<img src="beatles_paul.jpg"  />
      </div>
      <div id="George" style="display:none">
      	<img src="beatles_george.jpg" />
      </div>
      <div id="Ringo" style="display:none">
      	<img src="beatles_ringo.jpg" />
      </div>
	  <div id="myyellow" style="display:none"></div>
      <div id="msg"></div>
</body>

This is my script:
Code:

function showDiv()
		{
			var mySelect = document.getElementById("myselect");
			var myList = document.getElementById("mylist");
			
			switch (mySelect.value)
			{
				case 'J':
						myDiv = document.getElementById("John");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block"; 		//Makes div viewable
						break;
						
				case 'P':
						myDiv = document.getElementById("Paul");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			//Makes div viewable
						break;
						
						
				case 'G':
						myDiv = document.getElementById("George");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			//Makes div viewable
						break;
						
						
				case 'R':
						myDiv = document.getElementById("Ringo");
						myList.innerHTML = myDiv.innerHTML;
						myList.style.display = "block";			//Makes div viewable
						break;
			}
		}
		
		function showYellow(event)
		{
			var myyellow = document.getElementById("myyellow");
			myyellow.style.display = "block";
			
		}
		function showpixels(event)
		{
		 	x=event.clientX
			y=event.clientY

			var myMsg = document.getElementById("msg");
			myMsg.innerHTML = "X coords: " + x + ", Y coords: " + y;
		}

Any feed back is greatly appreciated.

I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration. Any help would be great! Thank you.

Javascript
Code:

   <script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
}
</script>

HTML THUMBNAIL
Code:

<div><img src="https://www.website.com/images/thumbs/image1.jpg" class="thumb" onMouseOver="Change_Big_One(this)"></div>

HTML LARGER IMAGE
Code:

<div><img src="" id="BigOne"></div>

How do I show the default icon for pdf, doc, etc... else show the image?
Code:

 
Show the default icon for pdf, doc, etc... else show image. 
Default icon:
'<img alt="" src="images/icons/' + sIcon + '.gif" width="16" height="16" border="0"><\/a>' +
The image:
'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0"></a>' +

Attempted javascript onError but only certain browsers support that or it's my code.
Code:

'<img alt="" src="' + fileUrl.replace( /'/g, '\\\'') + '" height="36" border="0" onerror="this.src=images/icons/' + sIcon + '.gif"></a>' +

Any ideas?

Hi,

I am trying to use the onmouseover on a table element (table/row/cell)
when creating the table using HTML everything is ok.
Code:

<TABLE border="2" >
 <TR >
   <TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#FFFFFF';" >Mauritania</td>
   <TD bgcolor="#FFFFFF" onMouseOver="this.bgColor='gold';" onMouseOut="alert('amit')">21N</TD>
   <TD>24N</TD>
   <TD>&nbsp;</TD>
   <TD>&nbsp;</TD>
 </TR>
</TABLE>

However when I am trying to do the same using javascript it is not working.
I can see the correct table data and background color but it doesnt change on mouse over.

Code:

function test_table(srcHolder)
{
	var srcTable = document.createElement("table");
	srcTable.border = 1;
	srcTable.borderColor = "black";
	
	var tmpRow = null;
	var tmpCell = null;
	srcHolder.appendChild(srcTable);
	for(i=0; i<3; i++)
	{
		tmpRow = srcTable.insertRow()
		for(j=0; j<3; j++)
		{
			tmpCell = tmpRow.insertCell()
			tmpCell.innerText = j;
			tmpCell.bgColor ="red"
			tmpCell.onMouseOver="this.bgColor='gold';" 
			tmpCell.onMouseOut="this.bgColor='#FFFFFF';"
			tmpCell=null;
		}
		tmpRow = null;
	}
}

can someone explain to me what's wrong?

<script language="javascript">
function splitNumber()
{alert("inside splitnumber");

var x = parseInt(document.getElementById("value1").value);
var z = x%10; /*units*/
var y = (x - z)/10; /*tens*/
var c = parseInt(document.getElementById("value3").value);
var a = c%10; /*units*/
var b = (c - a)/10; /*tens*/


for(var i=0;i<=z;i++)
{
var parseInt(document.getElementById("u1").td.value);
for(((document.getElementById("u1").td.value))=0;((document.getElementById("u1").td.value))<=i;((doc ument.getElementById("u1").td.value))++)
{
document.write("<td> " +document.getElementById("u1").td.value +"</td>")
}
}
}
</script>



/*this is the code i write for generating unique values in the table cells, but it is not working*/




<body >

<div class="left">
<table class="main" cellpadding="3px" cellspacing="6px">

<tr>
<td width="630px" height="50px" bgcolor="#ffffff">
<table class="tens">
<tr id="t1">
<td value="9"></td>
<td value="8"></td>
<td value="7"></td>
<td value="6"></td>
<td value="5"></td>
<td value="4"></td>
<td value="3"></td>
<td value="2"></td>
<td value="1"></td>
</tr>
</table>
</td>
<td width="200px" height="50px" bgcolor="#ffffff">
<table class="units">
<tr id="u1">
<td value="9"></td>
<td value="8"></td>
<td value="7"></td>
<td value="6"></td>
<td value="5"></td>
<td value="4"></td>
<td value="3"></td>
<td value="2"></td>
<td value="1"></td>
</tr>
</table>
</td>
</tr>

<tr>
<td width="630px" height="50px" bgcolor="#ffffff">
<table class="tens">
<tr id="t2">
<td value="9"></td>
<td value="8"></td>
<td value="7"></td>
<td value="6"></td>
<td value="5"></td>
<td value="4"></td>
<td value="3"></td>
<td value="2"></td>
<td value="1"></td>
</tr>
</table>
</td>
<td width="200px" height="50px" bgcolor="#ffffff">
<table class="units">
<tr id="u2">
<td value="9"></td>
<td value="8"></td>
<td value="7"></td>
<td value="6"></td>
<td value="5"></td>
<td value="4"></td>
<td value="3"></td>
<td value="2"></td>
<td value="1"></td>
</tr>
</table>
</td>

</tr>
<tr>
<td width="630px" height="50px" bgcolor="#ffffff">
<table class="tens">
<tr id="t3">
<td value="9">9</td>
<td value="8">8</td>
<td value="7">7</td>
<td value="6">6</td>
<td value="5">5</td>
<td value="4">4</td>
<td value="3">3</td>
<td value="2">2</td>
<td value="1">1</td>

</tr>
</table>
</td>
<td width="200px" height="50px" bgcolor="#ffffff">
<table class="units">
<tr id="u3">
<td value="9">9</td>
<td value="8">8</td>
<td value="7">7</td>
<td value="6">6</td>
<td value="5">5</td>
<td value="4">4</td>
<td value="3">3</td>
<td value="2">2</td>
<td value="1">1</td>

</tr>
</table>
</td>

</tr>
</table>



</div>
<div class="right" >
<table cellpadding="3px">
<tr>
<td width="5px"></td>
<td><span class="row"><input min="0" max="99" type="number" id="value1" name="value1" value="0" onchange="javascript:addNumbers()"/></span></td>
</tr>
<tr>
<td width="5px"><b style="font-size:25px; position:relative; top:18px;">+</b></td>
<td><span class="row"><input min="0" max="99" type="number" id="value3" name="value3" value="0" onchange="javascript:addNumbers()"/></span></td></tr>
<tr><td width="5px"></td>
<td><span class="row" ><input style=" width:66px; position:relative; right:25px;" readonly="readonly" id="answer" name="answer" value="0" /></span></td></tr>
</table>





</div>
</body>

I would like to have an image color change when mousing over it, thus defining it as a link. What do I have to do to make this happen? Thanks.

Hi guys,

any help will be greatly appreciated...

The problem:
Hover effect is painfully slow IE (only IE) and table mouseover causes very high processor usage
When you move the mouse over table elements flash animation stutters/pauses (making flash banners impossible)

You can se the page he fondovi (there's a flash animation on the right side of the page (light grey/blue color))