|
JavaScript - Some Imgs Won't Swap
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>
Similar TutorialsHi all. I would like to precache my menu imgs cos of rollover delay. Tried this way, Is it right? Code: <script type="text/javascript">
var offImgArray = new array();
offImgArray["imgname2"].src ="images/navbtn/offbtn_2.gif";
offImgArray["imgname3"].src ="images/navbtn/offbtn_3.gif";
offImgArray["imgname4"].src ="images/navbtn/offbtn_4.gif";
offImgArray["imgname5"].src ="images/navbtn/offbtn_5.gif";
// same for on images?
// code here
function linkOver(link)
{
var image = link.getElementsByTagName("IMG")[0];
image.src = image.src.replace("offbtn_2.gif","onbtn_2.gif");
image.src = image.src.replace("offbtn_3.gif","onbtn_3.gif");
image.src = image.src.replace("offbtn_4.gif","onbtn_4.gif");
image.src = image.src.replace("offbtn_5.gif","onbtn_5.gif");
// other imgs here
}
Edit. I'm missing smthg cos I get error array is nul etc low tech Hi all If I pre-cache imgs like this ... (10 in all) Code: <head> <script type="text/javascript"> PreImage1= new Image(width,height); PreImage1.src = "images/navbtn/onbtn_1.gif"; PreImage2 = new Image(width,height); PreImage2.src = "images/navbtn/onbtn_2.gif"; PreImage3= new Image(width,height); PreImage3.src = "images/navbtn/offbtn_1.gif"; PreImage4 = new Image(width,height); PreImage4.src = "images/navbtn/offbtn_2.gif"; </script> Will imgs be read from cache if I then do this?... or have I missed smthg? Code: <body> <img src="images/navbtn/offbtn_1.gif" onmouseover=this.src="images/navbtn/onbtn_1.gif" onmouseout=this.src="images/navbtn/offbtn_1.gif" alt="" /> </div> low tech Hi all Is there a way to get the image(s) to load into the table after the page has loaded instead of the way I have it now? I have 4 tabs, but I would like the imgs in tabs 2,3,4 to load after page load. Example of how the tabs look. Code: <div class="tabbertab">
<h2>Australia_____</h2>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFCC">
<caption class="highlight_Red">澳洲 Australia
</caption>
<tr>
<td><a href="pages/promotion.html#aus_ACE" rel="nofollow" target="_blank"><img src="pages/images/Pics/AUS/ace.jpg" alt="ACE / ATTC" width="110" height="69" border="0" align="left" class="ozimg_L"/> ...a few more images etc
the other tabs look the same. LT 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>
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>
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 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 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...). 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. 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);
}
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. 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!!! 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.
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.... I need a script and HTML code for an image effect like this: http://www.saksfifthavenue.com/main/...11947&ev19=1:2 Something very easy, if possible. Thanks.
|
|||||||