JavaScript - Newbie Problem With Simple Image Swap

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

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.

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, everyone. I've been scratching my head about what's wrong with my script for awhile now. What I need to do is use the swapImages(id1,id2,id3) function to simply swap three images at an interval of 2 seconds. What happens with my script is that the first image shows up, and after 2 seconds, it switches to the next one. The problem is that the images start rapidly switching infinitely after those first two seconds. Could someone point out where the problem spot in my code is? Here's the code from my external js file:

Code:

function swapIt(id1,id2,id3)
{
	var object1 = document.getElementById(id1);
	var object2 = document.getElementById(id2);
	var object3 = document.getElementById(id3);
	
	var z1 = object1.style.zIndex;
	var z2 = object2.style.zIndex;
	var z3 = object3.style.zIndex;
	
	object1.style.zIndex = z3;
	object2.style.zIndex = z1;
	object3.style.zIndex = z2;
}

Here's the code invoking this function in my html file:

Code:

function moveAvalon()
	{
		var x = xCoord("avalon");
		
		if(x <= (W - 125))
		{
			shiftIt("avalon", 10, 0);
			setInterval("moveAvalon()", 50);
		}
		else if(x > (W - 125))
		{
			swapImages();
		}
	}
	
	function swapImages()
	{
		showIt("kids");
		showIt("fiction");
		showIt("nfiction");
		
		setInterval( 'swapIt("kids", "fiction", "nfiction")' , 2000);
	}

Ok so I have a problem which I previously thought I had solved.

I am creating a JavaScript Toggle off and on panel and although I have the code sussed for the toggling function there is something off on the image swap function

I currently have it set up on two panels, so the code is used multiple times, the problem is it changes both buttons each time rather that just the one that was clicked.

Anyway let's see what you think

Javascript:
Code:

<script type="text/javascript">
var imageURL = "../images/portfolio/open.png";

function changeImage() {

     if (document.images) {
              if (imageURL == "../images/portfolio/open.png") imageURL = "../images/portfolio/close.png";
         else if (imageURL == "../images/portfolio/close.png") imageURL = "../images/portfolio/open.png";
         
         document.images["img1"].src = imageURL;
		 document.images["img2"].src = imageURL;
     }
} 
</script>

HTML:
Code:

<a href="#" onclick="toggle_visibility('job1');"><img name="img1" src="../images/portfolio/open.png" onClick="changeImage();"></a>
<a href="#" onclick="toggle_visibility('job2');"><img name="img2" src="../images/portfolio/open.png" onClick="changeImage();"></a>

Any idea what I have done wrong and why it is changing both of the images ('img1' and 'img2') instead of changing them seperately as they are clicked ??

I'm a designer and HTML/CSS coder only. I'd like to ask the community for the simplest solution on making an image swap to different image when the user clicks one of the many thumbnails. It's pretty standard gallery functionality, "click the thumbnail to see the big version".

I'm hoping to get some JavaScript that is easy to configure even though I don't know how to write JavaScript.

Here's a link to the page:
http://clientzone.thermostudios.com/.../bouquets.html
The thumbnails are on the left and the replicable image on the right.

Thanks in advance.

I am working on a demo for a movie site, and 90% of everything seems cool.
Here

I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment.

- There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image.

I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image.
Code:

		FadeOpacity(main_img_id, 100, 0, 600, 12);
		setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);

- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing.
Code:

		document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i];
		img_height = document.getElementById(main_img_id).clientHeight;

Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated.

I have one image on a page and I am trying to mix 2 javascripts actions on that image:
- the first one is an automatic daily change of images (3 different images in this example)
- the second one is the display of the same image in bigger when the mouse is over it.
The total of images are 6 (2 different sizes for 3 images).

I have made a search but I didn't find the solution. Here is the code (the daily change works but not the rollover.
Thank you to correct it or giving an other solution. (My level in Javascript: low)

[CODE]<SCRIPT LANGUAGE="JavaScript">
function todaysPhoto(){
var i= 3 ;
var todaysFoto=new Array();
todaysFoto[1]="img1_small.jpg";
todaysFoto[2]="img2_small.jpg";
todaysFoto[3]="img3_small.jpg";
var todaysPic=new Array();
todaysPic[1]="img1_big.jpg";
todaysPic[2]="img2_big.jpg";
todaysPic[3]="img3_big.jpg";

t=new Date().getTime();
var days=Math.floor(t / 86400000) % i+1;
document.getElementById("todaysfoto").src="images/photos/"+todaysFoto[days];

function SwapImg(){
document.todaysfoto.src ="images/photos/"+todaysPic[days];
return true;}

function SwapBack(){
document.todaysfoto.src ="images/photos/"+todaysFoto[days];
return true;}
</SCRIPT>

<body onload="todaysPhoto()">
<a href="" onmouseover="SwapImg()" onmouseout="SwapBack()">
<img name="todaysfoto" width="150px" height="100px" id ="todaysfoto" /></a>[CODE]

I have an on/off image piece of code: (probably out of date!)

Code:

<!--
var NN3 = false;
image1= new Image();
image1.src = "photo1.gif";
image1on = new Image();
image1on.src = "photo2.gif";
function on3(name)   {
        document[name].src = eval(name + "on.src");
}
function off3(name)  {
        document[name].src = eval(name + ".src");
}
NN3 = true;

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {
        if (NN3) off3(name);
}
// -->

My problem is that I am trying to add sound to the clicking and mousing out of the image. Without sound, it works (and works exactly the way I want it to) like this;

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');" onmouseover="off('image1')">
<img src="photo1.gif" name="image1"></a>

Adding (flash)sound I can do this and it works OK too:

Code:

<a href="javascript:myVoid()" onmousedown="on('image1');mySoundObj1.TGotoAndPlay('/go','start'); return true;" onmouseout="off('image1');">
<img src="photo1.gif" name="image1"></a>

But what I want to occur is that a second "swish" sound happens onmouseout (in the red place below) but ONLY if the mousedown has already occurred:

Code:

<!--
...

function on(name)  {
        if (NN3) on3(name);
}
function off(name)  {

 [SWISH SOUND HERE] 

        if (NN3) off3(name);
}
// -->

I hope this doesn't read complicated. I know it's really a simple toggle with an if, but I've tried dozens of things to no avail.

I have to replicate this many hundreds of times in a website...and I have to stick with flashsound (which I like anyway).

Any help would be appreciated.

Hey everyone,

I'm just trying to figure out if it is possible to swap the pages background image when a button is clicked without refreshing the page? I've looked around and can't really find anything helpful.

Any tips or pointers in the right direction would be much appreciated

Thanks

YD

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.

Can someone tell me how to veiw this eval's out put?

PHP Code:
function doButtons(picimage) {
eval("document['picture'].src = " + picimage + ".src");
} 




PHP Code:
<?php 

// to change the image size within the web page
    function imageResize($width, $height, $target) {
        //takes the larger size of the width and height and applies the formula accordingly...
        //this is so this script will work dynamically with any size image 
        
        if ($width > $height) {
            $percentage = ($target / $width); 
        } 
        else { 
            $percentage = ($target / $height); 
        } 
        
        //gets the new value and applies the percentage, then rounds the value 
        
        $width = round($width * $percentage); 
        $height = round($height * $percentage); 
        
        //returns the new sizes in html image tag format...
        //this is so you can plug this function inside an image tag and just get the 
        
        return "width='$width' height='$height'"; 
    } 
?>

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  Ronnie T. Moore, Editor -->
<!-- Web Site:  The JavaScript Source -->

        <!-- Begin
        var photo_1 = new Image();
        var photo_2 = new Image();
        var photo_3 = new Image();

        photo_1.src = "uploads/harkly_1.jpg";
        photo_2.src = "uploads/harkly_2.jpg";
        photo_3.src = "uploads/harkly_3.jpg";

        function doButtons(picimage) {
        eval("document['picture'].src = " + picimage + ".src");
        }

        //  End -->
</script>
</HEAD>

<?php //get the image size of the picture and load it into an array 

$photo_1="uploads/harkly_1.jpg";
$photo_2="uploads/harkly_2.jpg";
$photo_3="uploads/harkly_3.jpg";

$myImg1 = getimagesize($photo_1);
$myImg2 = getimagesize($photo_2);
$myImg3 = getimagesize($photo_3);


echo "

<BODY>
    <center>
        <table border=1>
        <tr><td>

        <p>
        <li><a href = '' onmouseover = \"doButtons('photo_1')\"><img name='photo_1' src='$photo_1' ";echo imageResize($myImg1[0], $myImg1[1], 55); echo " border=0><p>

        <li><a href = '' onmouseover = \"doButtons('photo_2')\"><img name='photo_2' src='$photo_2' ";echo imageResize($myImg2[0], $myImg1[1], 55); echo " border=0><p>

        <li><a href = '' onmouseover = \"doButtons('photo_3')\"><img name='photo_3' src='$photo_3' ";echo imageResize($myImg3[0], $myImg1[1], 55); echo " border=0><p>

        <td width=440 height=300> 
        <img name='picture' src=uploads/harkly_1.jpg ";echo imageResize($myImg1[0], $myImg1[1], 300); echo " border=0></td> 

    </tr>
    </table>
</center>
    ";
?>

Hard To Explain What I need. Looking for javascript, to do what i've hap-hazardly slapped together he
I'd like to do this without having to reload a page or create a new page for each image.

http://www.samivesphotography.com/redes/portraits.html

Specifically the switching of the main image by the thumbnails. The difference in what i've seen online, is that i'm actually using them as a cell background.

-Sam

Hello,
I'm trying to put some code together to create an image-swapping system, that when you click on the image it'll hide the image and replace it with a given iframe vimeo/youtube code...

The swapping part works fine, however when the iframe loads up, it hides all other flash objects in the page, and I can't figure out why.

Here's the JS
Code:

function swapvideo(w,h,url) {
	document.getElementById('video_pholder').style.display='none';
	document.getElementById('video_code').innerHTML="<iframe src='"+url+"' width='"+w+"' height='"+h+"' frameborder='0' webkitAllowFullScreen allowFullScreen></iframe>";
	document.getElementById('video_code').style.display='block';
}

And here's the body
Code:

<div id="video_pholder"><a href="" onclick="swapvideo('700','394','http://player.vimeo.com/video/30620364?title=0&amp;byline=0&amp;portrait=0&amp;color=FFFFFF&amp;autoplay=1'); return false;">
	<img src="image.jpg" width="700" height="393" /></a>
</div>
<div id="video_code" style="display:none;"></div>

You can see it in action he http://blog.davidterranova.com when you click on the "krix" image.
It'll hide the top header and also the other flash videos in the posts below.

Any ideas why this is happening?

I have added "Swap Image" into a page which already has a Drop Down Menu. However the Drop Down Menu stopped working. I know I have to remove the last line from the Drop Down Script ...window.onload=startList;... and integrate it into the <body tag> but I can't seem to figure it out.

Someone please help...

Below is the script for the drop down menu.

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Here is the page I'm trying to work with.

http://sigautoparts.com/home-test.htm