|
JavaScript - Mouseover Div Swap Just Won't Work Right
Hi,
I'm been struggling with this for a week now, I'm new to javascript so please bear with me. What I have been trying to do is get the div to swap once you go over a <td>, at the moment the when you point on one of the <td> it takes the div away. I have a feeling it's got to do with this piece of code: Code: if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
Here is the complete code: Code: <script language="javascript">
function showDiv(elem)
{
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id != "navtxt" && arr[i].id.substr(0,5) != "style" && arr[i].id.substr(0,5) != "arrow" && arr[i].id != "" && arr[i].id != "mediaspace") {
arr[i].style.display = 'none';
var styler = document.getElementById("style1_"+arr[i].id);
styler.className = "stylegray";
var styler = document.getElementById("style2_"+arr[i].id);
styler.className = "stylegray";
}
}
var arr = document.getElementsByTagName('img')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,5) == "arrow") {
arr[i].src = 'images/blank.jpg';
}
}
var arr = document.getElementsByTagName('a')
for(var i=0; i<arr.length;i++)
{
if (arr[i].id.substr(0,7) == "style3_") {
var styler = document.getElementById(arr[i].id);
styler.style.color = "#e3e3e3";
}
}
e2 = document.getElementById(elem);
e2.style.display = 'block';
e3 = document.getElementById("style1_"+elem);
e3.className = "stylered";
e3 = document.getElementById("style2_"+elem);
e3.className = "stylegray2";
e3 = document.getElementById("style3_"+elem);
e3.style.color = "darkred";
e3 = document.getElementById("arrow_"+elem);
e3.src = "images/arrow.png";
}
</script>
<td align="left" style="<?=$bstyle?> padding-left: 10px; padding-right: 10px;" width="<?=$sizer?>%" onmouseover="javascript:showDiv('<?=$value["showDiv"]?>');" valign="top">
I would really appreciate it if someone can just point me into the right direction. Thanks Similar TutorialsHello. I have a script that detects the image size of a url and then shows a resized version of the image if it's necessary to resize. (this script was provided to me by the user bullant, thank you.) (Script will be shown later further down) In order to display the resized image, I must specify the id tag of myImg(and a number) in the img tag and must have an equal number of urls in the script as I do img tags. So, if I have three images I need to do the following to get them to appear. Code: <div><img id="myImg0" src='' alt="" /></div>
<div><img id="myImg1" src='' alt="" /></div>
<div><img id="myImg2" src='' alt="" /></div>
And this is the script (it can go right below the above code and all in the body tag): Code: <script type="text/javascript">
var picUrl = [
'http://localhost/test/pic1.jpg',
'http://localhost/test/pic2.jpg',
'http://localhost/test/pic3.jpg',
];
//create image objects
oPic = new Array();
for(i=0; i < picUrl.length; i++){
oPic[i] = new Image();
oPic[i].src = picUrl[i];
}
window.onload=function(){
var maxWidth = 200;
var maxHeight = 200;
for(i=0; i < oPic.length; i++){
var width = oPic[i].width; //original image width
var height = oPic[i].height; //original image height
//set the image size to display on the page
var newDims = calcNewDimensions(width, height, maxWidth, maxHeight);
document.getElementById('myImg'+i).width = newDims['width'];
document.getElementById('myImg'+i).height = newDims['height'];
document.getElementById('myImg'+i).src = oPic[i].src;
}
}
function calcNewDimensions(width, height, maxWidth, maxHeight){
newDims = new Array();
//scaling factors
var xRatio = maxWidth / width;
var yRatio = maxHeight / height;
//calculate the new width and height
if(width <= maxWidth && height <= maxHeight) { //image does not need resizing
newDims["width"] = width;
newDims["height"] = height;
} else if(xRatio * height < maxHeight) {
newDims["height"] = Math.round(xRatio * height);
newDims["width"] = maxWidth;
} else {
newDims["width"] = Math.round(yRatio * width);
newDims["height"] = maxHeight;
}
return newDims;
}
</script>
O.k. Now, I have the following I am working with: Code: <!--Image 5--> <img src="http://blahblah.com/images/red2.jpg" alt="Item photo" onmouseover="document.swap.src='http://blahblah.com/images/red2.jpg';" height="80"> in which you can see that onmouseover, a larger image is shown (it's not rescaled). You can also see that the url of an img is specified there. How can I get the rescaled image to show in that spot or the url from the picUrl Array and the image shown in the correct size, in that spot of Code: onmouseover="document.swap.src= ? This is the entire area in which the onmouseover code will be used in case you need it. Code: <html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>MouseOver-Images</title>
<style type="text/css">
td#kdwhdMAINPHOTO { width: 616px; vertical-align: top; }
table#kdwhdTHUMB { margin-top: 12px; }
td#kdwhdTHUMBNAILS { background-image:
url(http://www.sunandfuninoc.com/testingsites/gems4me/images/t_28.jpg);
width: 616px; height: 114px; text-align: center; }
td#kdwhdTHUMBNAILS img { border: 1px solid #696969; }
td#kdwhdTABLE { width: 296px; vertical-align: top; }
-->
</style>
</head>
<body>
<table style="width: 924px;" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td id="kdwhdMAINPHOTO"
style="text-align: center; background-color: white;">
<!--Image 1--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
name="swap" style="border: 0px solid rgb(105, 105, 105);"
height="450" width="450">
<table id="kdwhdTHUMB" border="0" cellpadding="0"
cellspacing="0" width="616">
<tbody>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_26.jpg"
alt="Click on the picture below to enlarge" height="25"
width="616"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_27.jpg"
alt="" height="10" width="616"></td>
</tr>
<tr>
<td id="kdwhdTHUMBNAILS"><!--Image 1--><img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 2--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 3--> <img
src="http://site.gems4me.com/images/450by450.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450.jpg';"
height="80">
<!--Image 4--> <img
src="http://site.gems4me.com/images/450by450-2.jpg"
alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/450by450-2.jpg';"
height="80">
<!--Image 5--> <img
src="http://site.gems4me.com/images/red2.jpg" alt="Item photo"
onmouseover="document.swap.src='http://site.gems4me.com/images/red2.jpg';"
height="80"></td>
</tr>
<tr>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/t_29.jpg"
alt="" height="10" width="616"></td>
</tr>
</tbody>
</table>
</td>
<td><img
src="http://www.sunandfuninoc.com/testingsites/gems4me/images/spacer.gif"
alt="" height="1" width="12"></td>
<td id="kdwhdTABLE">
<table border="0" cellpadding="5" cellspacing="0"
width="296">
<tbody>
<tr>
<td colspan="2" id="kdwhdTABLETITLE">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR1C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR1C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff
</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
<tr>
<td class="kdwhdSPECR2C1" nowrap="nowrap">Stuff</td>
<td class="kdwhdSPECR2C2">Stuff</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
My apologies if this request is vague, but I am not completely certain what the terms are for what I am asking. So I will include a link to an example: http://www.v12groupinc.com/ Below the flash banner, there is a row of tabs that below display different text when you mouse over each. If you move the cursor away, the text of the last mouse-over stays (as opposed to defaulting to something else). It is the closest example to what I'd like to do but don't really know what it is to look for in terms of assistance. Essentially I want to make a set of 3 graphic rollover tabs that each have different text attached to them. I would like for the tab to rollover and the text to change when mousing over each (the first one would be the default of course). However I would also like for the last tab that was moused over's text to remain when the cursor is moved away. With various tutorials online I've been able to create a text based one that unfortunately resets to default on mouseout and to which I haven't been able to add rollover images to. If anyone can point me to a tutorial, enlighten me to what terms to search for, or even give me some code to start with, I would be most grateful. Thanks! I would like to add a submenu that pops up when the mouse moves over the first-level menu option. I succesfully added the submenu. However, now the image-swap script (the script that makes that the image that you see change as you move your mouse on the image) doesn't work anymore. Does anyone have any idea what I'm doing wrong? The relevant part of the header: Code: <script type="text/JavaScript">
<!--
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_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_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>
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
float : left;
width : 20.35em;
}
#nav li { /* all list items */
position : relative;
float : left;
line-height : 0em;
margin-bottom : -1px;
width: 11em;
}
#nav li ul { /* second-level lists */
position : absolute;
left: -999em;
margin-left : 18.35em;
margin-top : -1.35em;
}
#nav li a {
width : 10em;
display : block;
color : none;
font-weight : bold;
text-decoration : none;
background-color : none;
padding : 0 0.5em;
}
#nav li a:hover {
color : none;
background-color : none;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
margin-left : 12em;
}
-->
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
The relevant part of the body code: Code: <table width="314" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="315"><div align="center"><a href="ob.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','afbeeldingen/menuob2.gif',1)"><img src="afbeeldingen/spacer.gif" alt="spacer" width="5" height="10" hspace="0" vspace="0" border="0" /><br />
<img src="afbeeldingen/menuob1.gif" alt="OB" name="Image10" width="309" height="27" border="0" id="Image10" /></a><br />
<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
<a href="kt.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','afbeeldingen/menukt2.gif',1)"><img src="afbeeldingen/menukt1.gif" alt="KT" name="Image12" width="309" height="27" border="0" id="Image12" /></a>
<a href="contact.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image15','','afbeeldingen/menucontact2.gif',1)"><img src="afbeeldingen/menucontact1.gif" alt="Contact" name="Image15" width="309" height="27" vspace="3" border="0" id="Image15" /><br /></a>
</div></td>
</tr>
</table>
<ul id="nav">
<li>
<a href="MS.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menums2.gif',1)"><img src="afbeeldingen/menums1.gif" alt="MS" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
<ul>
<li>
<a href="aa.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menuaa2.gif',1)"><img src="afbeeldingen/menuaa1.gif" alt="AA" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="bb.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menubb2.gif',1)"><img src="afbeeldingen/menubb1.gif" alt="BB" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
<li>
<a href="cc.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image11','','afbeeldingen/menucc2.gif',1)"><img src="afbeeldingen/menucc1.gif" alt="CC" name="Image11" width="309" height="27" vspace="3" border="0" id="Image11" /></a><br />
</li>
</ul></li></ul>
Hi Coders, I have been trying to achieve a multiple mouseover effect on some of my pictures within my web page. The first effect changes the picture within a table - works fine The second effect should change the text within another table. - does not work. I am receiving the error message: 'document.text' is null or not an object. Here is the code which lies on my image: Code: <td style="height: 101px; width: 20%" valign="top"> <img onMouseover="changeimage(myimages[1],this.href); newchange();" alt="loading" height="86" src="images/marsrover_sml.jpg" width="104" /></td> Here is the newchange() script: Code: <script language="JavaScript1.1">
function newchange()
{
document.text.innerHTML='<b>hello world</b>'
}
</script>
And I am sure that the table in which the text should appear has its Id and Name defined as "text" Here is it: Code: <td class="style5" Id="text" name="text" style="height: 29px; width: 525px" valign="top"> <strong class="style10">Endavour has launched</strong></td> But could not make it work error free. Thanks for any comments. could somebody plz tell me why this isnt working?? i want it specifically as it is because i need it in a bigger picture Code: <body>
<img id="down0" src="images/greentick.png" onclick="swap(0,1)" />
<br />
<table><tr><span id="0"><td>asdasdasd</td></span></tr></table>
<br />
<table><tr><span id="1"><td>ante gamisou re gyfto</td></span></tr></table>
<script type="text/javascript">
/*<![CDATA[*/
function swap(idA,idB){
var cellA=document.getElementById(idA);
var cellB=document.getElementById(idB);
if(cellA&&cellB){
var temp=cellA.innerHTML;
cellA.innerHTML=cellB.innerHTML;
cellB.innerHTML=temp;
}
alert(idB);
}
/*]]>*/
</script>
</body>
In firefox Images 1 2 & 3 won't swap and in IE the img src(not PhotoBig) wont show pics 1 2 & 3 any reason why? I'm new to javascript so its probably a dumb reason? Please help if you can. Code: <script type="text/javascript">
function update(url,index,isSuper) {
document['PhotoBig'].src=url;
}
</script>
Code: <img src="graphics/travel/big/keysfish1.gif" name="PhotoBig" style="border:1px solid black">
<table>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish1.gif', 0, false); return false;">
<img src="graphics/travel/thumbnails/keysfish1.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish2.gif', 1, true); return false;">
<img src="graphics/travel/thumbnails/keyfish2.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/keysfish3.gif', 2, true); return false;">
<img src="graphics/travel/thumbnails/keyfish3.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/keysfish4.gif', 3, true); return false;">
<img src="graphics/travel/thumbnails/keyfish4.gif" style="border:1px solid black">
</a>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center; font: .8em 'Comic Sans MS', Arial;">
Move the cursor over the images/picture you wish to preview.
</td>
</tr>
<tr>
<td>
<a onMouseOver="update('graphics/travel/big/keysturtle1.gif', 4, true); return false;">
<img src="graphics/travel/thumbnails/keysturtle1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/tyleranthony.gif', 5, true); return false;">
<img src="graphics/travel/thumbnails/tyleranthony.gif" style="border:1px solid black">
</a>
</td>
<td>
<a onMouseOver="update('graphics/travel/big/uwdiver1.gif', 6, true); return false;">
<img src="graphics/travel/thumbnails/uwdiver1.gif" style="border:1px solid black">
</a>
</td><td>
<a onMouseOver="update('graphics/travel/big/uwlou.gif', 7, true); return false;">
<img src="graphics/travel/thumbnails/uwlou.gif" style="border:1px solid black">
</a>
</td>
</tr>
</table>
Here is the code I'm using: Code: <style type="text/css" rel="stylesheet" href="">
li#button {
cursor:pointer;
}
</style>
<script type="text/javascript">
var num = 6; // this is # of divs you have
function swap(what)
{
for(var i = 0; i < num; i++)
{
document.getElementById('swap'+i).style.display = 'none';
}
document.getElementById('swap'+what).style.display = 'block';
}
var createStyle = document.createElement('style');
var createStyleProp = document.createTextNode('.hidden { display:none; }');
createStyle.appendChild(createStyleProp);
document.getElementsByTagName('head')[0].appendChild(createStyle);
</script>
<body>
<div id="content">
<ul id="a-menu">
<li id="button" onClick="swap(0)"><b>button1</b></li>
<li id="button" onClick="swap(1)"><b>button2</b></li>
<li id="button" onClick="swap(2)"><b>button3</b></li>
</ul>
<div id="swap0" class="block">content 1</div>
<div id="swap1" class="hidden">
<ul id="submenu">
<li id="button" onClick="swap(3)">button1</li>
<li id="button" onClick="swap(4)">button2</li>
<li id="button" onClick="swap(5)">button3</li>
<li id="button" onClick="swap(6)">button4</li>
</ul>
<div id="swap3" class="block">content 2</div>
<div id="swap4" class="hidden">content 3</div>
<div id="swap5" class="hidden">content 4</div>
<div id="swap6" class="hidden">content 5</div>
</div>
<div id="swap2" class="hidden">content 6</div>
</div>
</body>
</html>
Is working fine for the first three buttons but the subdivs from swap1(div) are not working. Can anyone help me with this?? I want the text in a textbox to change to red when I click the box and back to blue when I click it again. I would prefer an inline solution like: <input type="text" value="CHANGE COLOR" onclick="this.style.color='red';"/> All, I have the following code: Code:
<div class="col-1">
<div id="swap">
<img src="images/gallery-img3-big.jpg" alt="" />
</div>
</div>
<div class="col-2">
<div class="list3">
<ul>
<li><a href="#"><img src="images/gallery-img1.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="images/gallery-img3.jpg" alt="" /></a></li>
</ul>
</div>
</div>
When you click on any of the links with the <li> I'd like to put the image that was clicked in the <div id="swap"></div>. So I'm thinking this would have to be done with innerHTML and maybe pass a function the img src of the link that I would click on. Just not sure how to do that though. Any help would be greatly appreciated. Thanks in advance. How do I swap these two paragraphs at will by clicking the buttons? Demo at: http://aapress.com.au/demo/paragraphswap/demo.html At present, for some reason, clicking button 2 makes both paragraphs appear. The effect I am after is to toggle individual paragraphs on and off, with the option of displaying both at once. Code: <html>
<head>
<title>Paragraph swap</title>
<script>
with (document)
{
write("<STYLE TYPE='text/css'>");
write(".hiddentext {display:none;} .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}");
write("</STYLE>");
}
function expandIt(whichEl)
{
whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
}
</script>
</head>
<body>
<div align="center">
<center>
<table border="1" cellpadding="10" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td bgcolor="#FFFF55" valign="top">
<div align="center">
<center>
<table border="0" cellpadding="0" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td width="100%" colspan="2"> </td>
</tr>
<tr>
<td width="40%"> </td>
<td width="60%">
<p onclick="expandIt(el1); return false;">
<img border="1" src="1.gif" width="23" height="15"> Click
buttons
<span onclick="expandIt(el2); return false">
<img border="1" src="2.gif" width="23" height="15"></a></p>
</span></td>
</tr>
<tr>
<td colspan="2"><br>
<div id="el1" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#CCFFFF">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%">
<tr>
<td valign="top">PARAGRAPH 1</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<br>
<div id="el2" class="hiddentext">
<div align="center">
<table border="0" cellpadding="10" style="border-collapse: collapse" width="65%" bordercolor="#000000" bgcolor="#FFCCCC">
<tr>
<td>
<div align="center">
<table border="0" cellpadding="3" style="border-collapse: collapse" width="100%" bordercolor="#000000">
<tr>
<td valign="top">PARAGRAPH
2</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
<br>
</center></div>
</td>
</tr>
</table>
</center></div>
</body>
</html>
So what I have to do is have 1 image on my webpage and a button. When the button is clicked the image needs to toggle back and forth between img1 and img2. After searching I've found ways to do this using the image itself as a button. But I'm having trouble getting it to work with an input button. Any help would be greatly appreciated. Hi there, I have this problem where I need to swap the content of two different elements every time i press the run button. The first element in the HTML code is called id="one" and the second is called id="two". so where element id = "one" is, id = "two" should replace it, and when i press run again id = "two" should be replaced by "id= "one", and so-forth.. I've tried putting the elements into a variable and then just basically typing code that basically looks like id two = id one id one = id two but that isn't working. Is there something more professional looking that someone could help me with??, thanks Reply With Quote 01-21-2015, 07:15 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts Swap Content Of Two Different Elements HELP - JavaScript | Dream.In.Code Hello, I'm trying to use a couple of radio buttons to toggle between text inputs being displayed, but although the code works well in IE and GC, it doesn't in FF. That's my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>number</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<script type="text/javascript">
function toggle(){
if (Mailbox.style.display == "none") {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
// document.getElementById('Mailbox').setAttribute('style','display:block');
document.getElementById('PhoneNum').setAttribute( 'style', 'display:none');
} else {
document.getElementById('Mailbox').removeAttribute('style');
document.getElementById('PhoneNum').removeAttribute('style');
document.getElementById('Mailbox').setAttribute('style','display:none');
// document.getElementById('PhoneNum').setAttribute('style','display:block');
}
}
</script>
</head>
<body>
<input type="radio" name="type" value="Voicemail" onclick="toggle()" checked="checked"/> VoiceMail
<input type="radio" name="type" value="Phone" onclick="toggle()"/> Phone Number<br></br>
<div id="Mailbox">Mailbox: <input type="text" name="mailbox"/></div>
<div id="PhoneNum" style="display:none">Number: <input type="text" name="number"/></div>
</body>
</html>
Can anyone help me sort this out? Thanks a lot, David I'm new to this...please help. I have several iframes. A few of them have rollovers inside the iframe htm(s). In my navi bar one of the drop down tabs (onclick points to the iframe) called qlist.htm. This works. But in the qlist is a text rollover -fri4_june.htm. this works. But when I go back to the qlist tab it stays on the fri4_june.htm and doesn't go back to the qlist.htm. I'm thinking it needs to be a swap restore() but not sure how to write it a where. here's some of the code: index: <script type="text/javascript" src="scripts_courtt/drdn.js"> </script><script type="text/javascript"> <!-- function show(which) { for ( var n = 1; n < 999999; ++n ) { var iframe = document.getElementById("ifr" + n); if ( iframe == null ) return; // no more to check iframe.style.display = ( which == n ) ? "block" : "none"; } } //--> </script> <iframe id="ifr2" src="qlist.htm" width="640" height="520" scrolling="no" frameBorder="0" style="display:none"></iframe> <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Upcoming Shows</a> <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()"> <a href="#" onclick="show(2)">Quick List</a> <a href="http://www.myspace.com" rel="nofollow" target="_blank">MySpaceCal</a></div></li> qlist.htm: <div class="qlist2"> <a href="juneshows/fri4_june.htm" rel="nofollow" target="_self">Jun 25 2010 8:00P</a><br /> </div> thankx.... Hey guys, Im a little stuck with a JQ script im trying to create. First the html: Code: <div id="image_holder">
<img src="images/default.jpg" id="image_swap" />
</div>
<ul id="links" class="test">
<li><a href="#" name="images/01.jpg">Wall-E 2</a></li>
<li><a href="#" name="images/02.jpg">Joker 1</a></li>
<li><a href="#" name="images/03.jpg">Joker 2</a></li>
</ul>
What im trying to accomplish is: 1.) When the mouse enters #links I want it to create a bool staying true if it's in there false if it has left. 2.) if the mouse is: 2a) swap the current image loaded out with the new image to be loaded else: 2b.)swap the current image loaded out with the default image. I have several different attempts at this, this script below is a working attempt. But because im referencing the actual "a" attribute, whenever I goto hover on a new link, it will quickly show the default image... Code: jQ('#links li a').hover(
function() {
var img = jQ(this).attr("name");
var parent = jQ(this).parent().parent().attr("id");
jQ("#image_swap").fadeOut("medium", function() {
// if mouse is within the #link id dont show default image
if(parent === "links") {
jQ(this).attr("src", img);
jQ(this).fadeIn("medium");
}
// if the mouse is outside the #link id show the default image
})
},
function() {
jQ("#image_swap").attr("src", "images/default.jpg");
}
);
Also as a side note, before asking why im using the "name" attribute to store the URL of the image, it's because the href will be pointed to an actual page. Below is the routine I am using that when invoked swaps images for other images: Code: <script>
function swapImage(swapContName) {
if (swapContName == 'mainImage1') {
document.getElementById('mainImage1').src = 'L1Bswap.gif';
document.getElementById('hand1').src = 'handr.gif';
document.getElementById('help1_pic').src = 'answers2.gif';
document.getElementById('homework').src = 'spacer.gif';
document.getElementById('instruct').src = 'spacer.gif';
document.getElementById('instructflag').src = 'spacer.gif';
}
}
</script>
Fairly simple and works well. But one of the images I would like to vanish (using the empty spacer.gif) has a border: Code: <img id="instructflag" border="1" src="FLAG.gif" width="23" height="15" align="left"> It must have this black border, but when it gets swapped for a blank, I am left with the black square. Anyone have any idea how to vanish the border along with the graphic? (I have some vague idea that "border" is not used any more, but anyway...). I've been banging my head for two days now trying to figure out how i can swap td cells. There are a lot of examples of how to order rows, but i can seem to find any on how to swap td cells. Has anyone a good referal for this.
Hey, I'm new to javascript, and I know there are a lot of tutorials out there. My only problem is that i'm finding it difficult to integrate stuff from different tutorials together. Basically, I want text links to swap the image on the website, but then want to allow a zoom function or lightbox function to the image that appears. I'm not best at explaining things so i've done an example below. After clicking the link, the image changes. i want to be able to do the zoom on the image that it's changed to. is this possible? any help would be much appreciated. http://www.jamesbutterworth.co.uk/untitled-1.html In the following code I display two buttons in the randommember div. I then append the randommember div with contents of the rana variable. This variable stores information related to a featured member and displays it as a link. Basically buttons appear on screen which are then followed by the featured member. But I would like to switch this around and have the featured member appear followed by the buttons. How can I do this? Obviously I can't put the buttons into the rana variable because then these become a link also removing the links functionality. Does anybody have any ideas how I can solve this problem. I am new to Javascript so please be gentle. Code: r = Math.floor(Math.random() * x.length);
function randommember() {
name = (x[r].getElementsByTagName("name")[0].childNodes[0].nodeValue);
sex = (x[r].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
seeking = (x[r].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
image = (x[r].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
rana = document.createElement('a');
aIdName = 'random';
ahref = '#';
aclick = 'show(' + r + ')';
rana.setAttribute('id', aIdName);
rana.setAttribute('href', ahref);
rana.setAttribute('onclick', aclick);
rana.innerHTML = "<h3>Featured Member</h3><br /><img src='images/" + image + ".gif' /><br /><br />Name: " + name + "<br />Sex: " + sex + "<br />Seeking: " + seeking;
document.getElementById("randommember").innerHTML = "<input type='button' onclick='previous()' value='<<' /><input type='button' onclick='next()' value='>>' /><br />";
document.getElementById("randommember").appendChild(rana);
}
Hello I would like to combine the funcationality of 2 versions I have created of the same site. I really painted myself into a corner with the 1st version, so I created the 2nd, only to find myself in the OTHER CORNER!!! The 1st is he http://www.rosemarierhoweinteriors.com/city.html Everything is functional EXCEPT the previous/next buttons. Because I had built it with sliding panels, I decided I would cut my losses and rebuild with another javascript which I found free on the internet. The 2nd is he http://www.annaleithauser.com/rosema...e/country.html Everything is functional, but the client now would like the navigational arrows at the bottom to swap the thumbnails underneath (as on version 1), rather than slide them individually (as on version 2)...while KEEPING the previous/next as is. Does anyone know a way out of this pickle? I will be eternally grateful. Thank you!!! |
|||||||