In a PHP/AJAX Pickle

Hi everyone,

Sorry its so off topic but i didnt really know where else to come ask or look.

Is there anyone out there who is a bit of a PHP/Javascript/AJAX/jquery wizard who wouldnt mind answering some stupid questions from a programmer who is used to ASP.NET rather than PHP.

One of the developers we use has totally hosed a job which was meant to be delivered and is no where to be found and as stated I had only just started learning php when this particular disaster struck. Im doing ok, but there is one rather complex page which i may struggle with a bit.

Cheers,
A

Sorry - my email address is in my profile..

@admins: again sorry for beign way off topic, not sure how much the rules have changed here since i was last properly online here so hope im not in violation or going to get smacked or anything.

A

can you post something about the problem?

Your not off topic as long as it has something to do with computers and technology in general - And programming has everything to do with that.


I can help with the php/JS part, I don't know AJAX/jquery

Thanks guys, if anyone can help me with the following (basically beacause im really under time constraint so dont have the time to go looking things up right now) then i would be eternally grateful. Im working on the ajax page at the moment and its going ok so really its now a javascript problem...

Image Rollover Issue (JavaScript)
---

Basically we have 2 images of 2 pieces of artwork one on the left (IMAGE 1) and one on the right (IMAGE 2). When you move the mouse into the left pane, I want IMAGE 1 to display on the right hand side and a new image (IMAGE 1 ALT) to display on the left.

When I roll off, they need to reset to the original IMAGE 1 (left) and IMAGE 2 (right)

And likewise, when I roll onto the right hand one, IMAGE 2 should appear on the left and IMAGE 2 ALT should appear on the right – so the ALT image always appears under the mouse.

Got some code (see below – all embedded – the PHP ECHO COMMANDS just bosh out strings containing the image URLS and these are all loaded properly.

What happens when I run this… epilepsy is what – it flickers like mad all over the shop.

      <div class="col_x_4">
            <img id="img1"  src="images/<?php echo $image1 ?>" alt="" 
                  onmouseover='document.getElementById("img1").src="images/<?php echo $image1alt; ?>"; document.getElementById("img2").src="images/<?php echo $image1; ?>";}' 
                  onmouseout='document.getElementById("img1").src="images/<?php echo $image1; ?>"; document.getElementById("img2").src="images/<?php echo $image2; ?>";' />  
      </div>
      <div class="col_x_4">
            <img id="img2"  src="images/<?php echo $image2 ?>" alt=""               
                  onmouseover='document.getElementById("img1").src="images/<?php echo $image2; ?>"; document.getElementById("img2").src="images/<?php echo $image2alt; ?>";}' 
                  onmouseout='document.getElementById("img1").src="images/<?php echo $image1; ?>"; document.getElementById("img2").src="images/<?php echo $image2; ?>";' />
                  
      </div>

I have looked briefly on google but they only really cater for single image rollover ratehr than two changes. Can anyone help with this one first as this would solve issues in two pages?

Any ideas - am also on MSN messenger if anyone is at a loose end today as im bound to have more questions ;-)

Thanks to everyone who can offer me some guidance - I do really appreciate it.

Andy

urghh - inline code!!!

Ok I guess that when the image is re-loaded an onmouseout event is fired and then a onmouseover and so forth.

Move your event code into the div and not the img tag.

And as I can't see your CSS you will want to fix the height and width of the div so that we don't get the events firing again.

wait so if I understand this right - you have 2 images that you want to swap for another 2 images on a mouse over of either image? The crazy effect is probably from rapidly swapping and unswapping the images with your mouse entering/leaving both images at once?

if thats the case can't you call a div to enclose the two images and then check for events on that div?

like so:

function swap() {
<?php
//code to swap both images
?>
}
function unswap() {
<?php
//code to unswap both images
?>
}

<div id="wrapper" 
style="width:[w of both images]; 
height:[h of largest image]"
onmouseover='swap();' onmouseout='unswap();'>

<!-- INSERT IMAGES BLAH BLAH ->

</div>

hope this helps(this code isn't tested)

@Indi: I put it inline so i could post it here, the code can live in an include file but didnt want to convolute the post. The CSS elements from the file are ..

.col_x_1				{float:left; width:108px; padding:0px 12px 0px 0px; text-align:left;}
.col_x_2				{float:left; width:228px; padding:0px 12px 0px 0px; text-align:left;}
.col_x_3				{float:left; width:348px; padding:0px 12px 0px 0px; text-align:left;}
.col_x_4				{float:left; width:468px; padding:0px 12px 0px 0px; text-align:left;}
.col_x_5				{float:left; width:588px; padding:0px 12px 0px 0px; text-align:left;}
.col_x_6				{float:left; width:708px; padding:0px 12px 0px 0px; text-align:left;}
.col_x_7				{float:left; width:828px; padding:0px 12px 0px 0px; text-align:left;}
.col_x_8				{float:left; width:936px; padding:0px 12px 0px 0px; text-align:left;}

@Yahfree: No i dont want to swap the images around with each other, I want to move one picture to the other image tag and bring a seperate image to the image tag the mouse is over


The div's represent invisible vertical columns down the page, the pictures in question span 4 of these each (hence them being in the col_x_4 css). I could give the images a class of their own and fix the height if you think its becuase the height is not fixed that its still going crazy?

A

Did you move the mouse events into the div element?

no but i will try it right now.

Incidentally guys and gals, Im looking for good php/mysql freelancers based around London if anyone is interested (drop me a mail to my profile address) and will give more info. The guy who did a runner wont be getting any more work from me.

A

left the code inline for ease of debugging here.. fixed the div and moved the events - doesnt appear to do anything at all now when you moues over and mouseout...

	<div class="col_x_4" style="height:100px;"	
		onmouseover='document.getElementById("img1").src="images/<?php echo $image1alt; ?>"; document.getElementById("img2").src="images/<?php echo $image1; ?>";}' 
		onmouseout='document.getElementById("img1").src="images/<?php echo $image1; ?>"; document.getElementById("img2").src="images/<?php echo $image2; ?>";' >
		<img id="img1" src="images/<?php echo $image1 ?>" alt="" />  
	</div>
	<div class="col_x_4" style="height:100px;"
		onmouseover='document.getElementById("img1").src="images/<?php echo $image2; ?>"; document.getElementById("img2").src="images/<?php echo $image2alt; ?>";}' 
		onmouseout='document.getElementById("img1").src="images/<?php echo $image1; ?>"; document.getElementById("img2").src="images/<?php echo $image2; ?>";' >
			<img id="img2" src="images/<?php echo $image2 ?>" alt="" />			
	</div>

Any other ideas?

emailed you.

Go here : http://www.indiepath.com/public/test/

That demonstrates the code working

Hi Indi, it certainly does work, however not quite what im after.

if we call the IMG tags image frames (left and right)

Un moused over state should have:-

Image 1 in left frame
Image 2 in right frame

Mouse Over Left frame should have:

Image 3 in left frame
Image 1 in right frame

Mouse Over Right Frame should have:

Image 2 in left frame
Image 4 in right frame


Any chance you could adapt the code to do something like that?

scratch that Indi - with a bit of fiddling it works a charm.

Wonder why those events were not firing before.

So can anyone explain why you need to fix the height of the div for this not to start flickering all over the place? Bizzare.

But all is well - thanks Indi & everyone. Great work.

A

When you change the node.src there is a very small delay in the browser loading the new image - in that time the div will collapse and the mouse event will fire. By fixing the dimensions of the div it won't collapse and the mouse will remain over it. :)

Would this then have applied if i had fixed the size of the image?

I am not sure if that would work, at least not without testing it. I would always use the container element method as it's tried, tested and reliable.