JavaScript - Swap Pictures

All,
I have a PHP script that will get images out of the database and display them in a grid. I have two verisons. I save a thumbnail which I display and then a larger image in a different folder. These images are placed in a scroll bar but what I would like to happen is that when I click on a thumbnail it basically displays the bigger image until I click on that image and it goes away. I would love for the middle of the image to be displayed in the middle of the users screen but beggers probably can't be choosers in this case.

An example of a similar desired result is a link he
http://qrayg.com/experiment/hig/

Instead of the hover, I'd like to utilize the onclick to display and remove the image. If it's easy to put the center in the center of the screen that that would be absolutely incredible as well.

Thanks for any guidance you could provide me on this.

Thanks in advance!

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 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.

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);

}

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....

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...).

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'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.

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

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!!!

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

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

Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh.

i found this code that refreshes the pictures:
Code:

<script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);


img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>

and to come up with the tables i made this code:

Code:

<table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);

img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;

document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>

but if you see the home page he

http://celulardepot.squarespace.com

you can see that something is DEFINITLY wrong lol
please help me! =D

i look everywhere for html and Java snip its and all seem to be different, can somebody please tell me how to code something like this,

also can the code be easy ish for example.

if show is 5pm till 6pm an image appears

if show is 6pm till 7pm an image appears

i know this is possible but there are so many codes out there,

thank you for your help

I am using a jquery gallery slideshow on my homepage and I am having an issue where the images loaded before the dom is loaded causing the images to display in an ugly stack.

I combated this a bit by setting a height on the div and setting the overflow to hidden. however you can still see the unstyled stack of images within the small div for a couple of seconds before the page is loaded.

the code to start the javascript is:

Code:

<script type="text/javascript">
	$(document).ready(function(){		
	$('#photos45').galleryView({
		panel_width: 980,
		panel_height: 300,
		gallery_width: 980,
		gallery_height: 900,
		frame_width: 120,
		frame_height: 50,
		pause_on_hover: true,
		nav_theme: 'light'
	});
	});
</script>

and the html is:

Code:

 <div style="height:360px; overflow:hidden; " >
 <ul id="photos45">
 <li><img src="../site_files/banners/cush.jpg" alt="Baffin Cush"/></a></li>

  <li><img src="../site_files/banners/coveralls.jpg" alt="Big Al Coveralls"/></li>

 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 
 <li><img src="../site_files/banners/chloe.jpg" alt="Baffin Chloe" /></li>
 </ul>
  

</div>

I have a feeling that this has something to do with the .ready function maybe it should be something else? You can see this in action he

http://bit.ly/8QRXWU