JavaScript - Image Change On Mouseover With Form Dropdown

like for example i have text areas named upload1 and upload2

when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts"

I've been looking for a solution to a dropdown menu problem where the button does not stay hovered when the list is navigated/as soon as the cursor leaves the button area.
At the moment the effect is setup using css sprites (locally) but I have seperate images also for the 2 states.

HTML
Code:

<dl class="dropdown">
<dt id="three-ddheader" onmouseover="ddMenu('three',1)" onmouseout="ddMenu('three',-1)"><div id="mainnav1"></div></dt>
<dd id="three-ddcontent" onmouseover="cancelHide('three')" onmouseout="ddMenu('three',-1)">
<ul><li>
<a href="page1.html" class="underline">Products 1</a>
<a href="page2.html" class="underline">Products 2</a>
<a href="page3.html" class="underline">Products 3</a>
<a href="page4.html" class="underline">Products 4</a>
<a href="page5.html" class="underline">Products 5</a>
<a href="page6.html" class="underline">Products 6</a>
<a href="page7.html">Products 7</a>
</li></ul></dd></dl>

CSS
Code:

#mainnav1 {width:218px; height:50px; background:url(../images/root/mainnav1.png)} #mainnav1:hover {background-position:0 -50px;} #mainnav1 a:active {background-position:0 -50px;}
#mainnav2 {width:218px; height:50px; background:url(../images/root/mainnav2.png)} #mainnav2:hover {background-position:0 -50px;} #mainnav2 a:active {background-position:0 -50px;}
#mainnav3 {width:218px; height:50px; background:url(../images/root/mainnav3.png)} #mainnav3:hover {background-position:0 -50px;} #mainnav3 a:active {background-position:0 -50px;}
#mainnav4 {width:218px; height:50px; background:url(../images/root/mainnav4.png)} #mainnav4:hover {background-position:0 -50px;} #mainnav4 a:active {background-position:0 -50px;}

.dropdown {float:left;}
.dropdown dt {width:218px; height:50px; overflow:hidden;}
.dropdown dt:hover {background-position:0 -50px;}
.dropdown dd {position:absolute; overflow:hidden; width:218px; display:none; z-index:200;}
.dropdown ul {width:218px;}
.dropdown li {display:inline;}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#747474; text-decoration:none; background:#efefef; width:218px;}
.dropdown a:hover {background:#757575; color:#dddddd;}
.dropdown .underline {border-bottom:1px solid #d9d9d9;}

JS
Code:

var DDSPEED = 1;
var DDTIMER = 1;

// Mouse Events //
function ddMenu(id, d) {
    var h = document.getElementById(id + '-ddheader');
    var c = document.getElementById(id + '-ddcontent');
    clearInterval(c.timer);
    if (d == 1) {
        clearTimeout(h.timer);
        if (c.maxh && c.maxh <= c.offsetHeight) {
            return
        } else if (!c.maxh) {
            c.style.display = 'block';
            c.style.height = 'auto';
            c.maxh = c.offsetHeight;
            c.style.height = '0px';
        }
        c.timer = setInterval(function () {
            ddSlide(c, 1)
        }, DDTIMER);
    } else {
        h.timer = setTimeout(function () {
            ddCollapse(c)
        }, 0);
    }
}

// Collapse //
function ddCollapse(c) {
    c.timer = setInterval(function () {
        ddSlide(c, -1)
    }, DDTIMER);
}

// Cancel Collapse During Dropdown Selection //
function cancelHide(id) {
    var h = document.getElementById(id + '-ddheader');
    var c = document.getElementById(id + '-ddcontent');
    clearTimeout(h.timer);
    clearInterval(c.timer);
    if (c.offsetHeight < c.maxh) {
        c.timer = setInterval(function () {
            ddSlide(c, 1)
        }, DDTIMER);
    }
}

// Expand & Contract //
function ddSlide(c, d) {
    var currh = c.offsetHeight;
    var dist;
    if (d == 1) {
        dist = (Math.round((c.maxh - currh) / DDSPEED));
    } else {
        dist = (Math.round(currh / DDSPEED));
    }
    if (dist <= 1 && d == 1) {
        dist = 1;
    }
    c.style.height = currh + (dist * d) + 'px';
    if ((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)) {
        clearInterval(c.timer);
    }
}

I heard that it's something to do with the mouseover function but feel like I could be adding css and not changing some of the stuff already present governing the script, can anyone guide me?
Thanks!

I'm not completely sure this is javascript, but is there a way of changing the z-index of my flash object when hovering over it?

Here is a link to my page:
http://aspspider.org/Samii/HireCar.aspx

As you can see, you cannot click on the link in the main content area because the menu is on a higher z-index than the content. I need a way for the content to be on a higher z-index than the menu until the menu is hovered over, in which case the z-index of the menu will be higher.

I hope this makes sense. Please help, this is driving me insane!

Samii
x

Hello,
I'm trying to put a site together and this time I'm going for an interactive feel.

Code:

<p id="status">[Closed]</p>

Thats the html of it. What i'm trying to accomplish is when the mouse goes onto the <p>, the [Closed] then turns into

Code:

<a href="index.php">Open</a>

but I can't get this figured. Could someone help me?

Thnx!

Im new to this forum and was wondering if anyone would mind helping me out.

Im attempting to modify some code i found here through google to be used to change a welcome screen to 4 different languages besides english.

heres the code

<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<style type="text/css">
.hide {
display:none;
}
.show {
display:inline;
}
</style>

<script type="text/javascript">
if(window.addEventListener){
window.addEventListener('load',showlinks,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',showlinks);
}
}

function showlinks() {

lis=document.getElementById('nav').getElementsByTagName('li');

for(c=0;c<lis.length;c++){

lis[c].onmouseover=function() {
this.getElementsByTagName('span')[0].className='hide';
this.getElementsByTagName('span')[1].className='show';
}

lis[c].onmouseout=function() {
this.getElementsByTagName('span')[0].className='show';
this.getElementsByTagName('span')[1].className='hide';
}
}
}
</script>

</head>
<body>

<ul id="nav">
<li>
<span>[Closed]</span>
<span class="hide"><a href="http://www.codingforums.com/">codingforums.com</a></span>
</li><li>
<span>[Closed]</span>
<span class="hide"><a href="http://www.google.com/">google.com</a></span>
</li><li>
<span>[Closed]</span>
<span class="hide"><a href="http://www.bbc.co.uk/">bbc.co.uk</a></span>
</li><li>
<span>[Closed]</span>
<span class="hide"><a href="http://w3c.org/">w3c.org</a></span>
</li>
</ul>

</body>
</html>
</code>

As far as i can tell, if i just add the correct number of span id's it should work, or is there a different code i must plug in to get it to switch to the different languages.

Hello

I'm a beginner when it comes to javascript. I found a nice script that did what I wanted, which was have 3 "buttons" that on hover change a different image to the side of them. However, I also would like the button that if clicked to go to a section of the website - so an internal link.
I was slightly confused when reading that to have a link in javascript isn't good practice. How could I achieve this?

I would really appreciate any help, thank you

below is the code

Code:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body bgcolor="FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('information-white-alt.png','training-quote.png','training-white-alt.png','consultancy-quote.png','information-white-alt.png','information-quote.png')">
<table width="350" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('b1up','','information-white-alt.png','biganchor','','information-quote.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b1up" width="270" height="74" border="0" id="b1up"></a></td>
    <td rowspan="3"><div align="center"><img src="home-statement.png" name="biganchor" width="500" height="222" id="biganchor"></div></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','training-quote.png','b2up','','training-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="training-white.png" name="b2up" width="270" height="74" border="0" id="b2up"></a></td>
  </tr>
  <tr>
    <td><a href="javascript:;" onMouseOver="MM_swapImage('biganchor','','consultancy-quote.png','b3up','','information-white-alt.png',1)" onMouseOut="MM_swapImgRestore()"><img src="information-white.png" name="b3up" width="270" height="74" border="0" id="b3up"></a></td>
  </tr>
</table>

Hi,
I want to make a piece of text fade from black to white while someone puts their mouse over it and change it back to black when they move their mouse away. I did it with the following code, but I'm wondering if anyone would do some (or all) of it a different way.
Thanks!


Code:

//convert RGB values to hexidecimal
function RGBtoHex(color) {
	var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
	var R = parseInt(digits[2]);
	var G = parseInt(digits[3]);
	var B = parseInt(digits[4]);
	Hex = new Array(R, G, B);
	return Hex;
}

// Start the text fading
function FadeStart(id, FadeTo) {
	Element = document.getElementById(id);
	OriginalColor = getComputedStyle(Element, null).color;
	Start = RGBtoHex(FadeTo);
	rgb = RGBtoHex(OriginalColor);
	red = (Start[0] - rgb[0])/16;
	green = (Start[1] - rgb[1])/16;
	blue = (Start[2] - rgb[2])/16;
	BeginFading = true;
	Fade();
	
}

//Actually do the fading
function Fade() {
	var Complete = (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]);
	if (BeginFading == true && rgb[0] != Start[0] && rgb[1] != Start[1] && rgb[2] != Start[2]) {
		rgb[0] += red;
		rgb[1] += green;
		rgb[2] += blue;
		var ChangeColor = "rgb(" + Math.round(rgb[0]) + ", " + Math.round(rgb[1]) + ", " + Math.round(rgb[2]) + ")";
		Element.style.color = ChangeColor;
		time = setTimeout("Fade()", 500);
	}
} 

//Return text to original color
function FadeStop() {
	BeginFading = false;
	clearTimeout(time);
	if (Element != null) Element.style.color = OriginalColor;
}

Hi,
Am trying to change both, the background color and the mouse pointer to hand on the mouseover event. Am using this to change the background color:
Code:

onMouseover="this.bgColor='#55FF55'"onMouseout="this.bgColor='#AEFFAE'"

How and i add the "change pointer to hand" on this as well?
Thanks

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>

Hello, I am needing the coding to do the follow:

When a user makes a selection from a dropdown, the value is placed in a text input.

SELECT >>> INPUT

Thank you so much for your help!

Hello,

I have been looking for this all day - Change currencies throughout the page

when choosing between countries or currencies from dropdown menu.

What I basically need is a dropdown menu which shows countries or currencies.

When you select anyone of it like USD all the prices throughout the page are

changed to USD. Now if you change it AUD/CAD/PKR etc they will be changed

accordingly.

A very good example of this is: http://creativeon.com. When you

change currency from right top dropdown menu - it changes the currencies of

all the packages in the main content.

I am a HTML developer and do not know much about javascripting. Please help me.

P.S. I have searched codingforums.com too and found only two links which are

not of my use because they are currency converter:
http://www.codingforums.com/showthread.php?t=196577
http://www.codingforums.com/showthread.php?t=196373

Best Regards and Thanks in Advance.

Hi all. I am creating a website and it utilizes the Apple Touch Icon:

Code:

<link rel="apple-touch-icon" href="/customIcon.png"/>

Basically, I want to be able to change the bolded part from a drop down menu. Like, the user would select a certain item in the drop down menu and it would change the bolded part to a different link (the one corresponding to the drop down menu selection). Any ideas?

basically i have a form with lots of fields.. drop down boxes and textarea's and standard input text..
now what i need is a way to change all of these fields with a fetch button.
i can get the value for the fields from the perl script on my server side.

the form basicslly sends lots of fields to my perl script and saves each field of data into seperate text docs. now my customer would like to retrieve the data back to the form to change aspects of it to be resubmitted .
i am struggling with the simplist of codes to set the value of the fields from a javascript variable
any ideas please.

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.