why doesn't my background image stay

php_beginner_83

Hi All

I'm having a problem getting the background image of a <div> to stay. What I'm trying to do is when a user clicks on a thumbnail of an image a larger version of the thumbnail will be displayed on the same page. This works no problem. Depending on whether the image is landscape or portrait, I want to change the background image. It works but after a few seconds it goes back to the original background image. However, instead of having the link on an image(my thumbnails) when I put the code on text it works and the background sticks.

I change the background image using javascript and the background image is specified using css.

Does anyone have any idea what's going on or how I can solve this?? 😕

Thank you.

This is my php code with the link on the thumbnail....Using this the background image will change but then quickly go back to the original background image.

      echo "<a href=\"".$_SERVER['SCRIPT_NAME']."?page=photo&img=".($dimarray[$i][1])."&ID=".$albumID."\"
      onclick=\"changeBGImage()\">" . "<img src=\"" . $thumbDir . "/" . $paths[$i] . "\" alt=\"" . $paths[$i] . "\" />\n";
         echo "   </a>\n";

However, when I use this code the background image changes and stays...

         echo '<a href="#" onclick="changeBGImage(\'background\')">shanna</a>';

Is there any other code you would need to see??

jay6390

Since your php code is not your javascript code, this isnt anything to do with PHP. You should post your javascript function changeBGImage

php_beginner_83

The javascript works ok. When I use the code on text it works fine but doesn't when I use it on <img>. So I wondered if there was maybe a problem with php. I have no clue why its doing this and can't figure it out so I'm asking anyone that might have a clue.

🙂

jay6390

To understand this properly you need to realise that PHP is server side, not client side scripting. That means that your PHP code does NOT run in your browser as you click things, it runs on the server, then sends the output to your browser. JavaScript on the other hand is clientside, which is why you can have funky animations and so on with it. The problem will be with your JavaScript code and your css.

php_beginner_83

Oh I've been playing around with the code and when I just use a html file the background image changes perfectly whether I use text or <img> as the link.

However, in my full code..i have a php file where this piece of code goes..it doesn't work..the background image switches back to the original.

ARGHHHH 😕😕

johanafm

The html you genereate through php scripts is no different at all from the html you'd write on your own. As such, have a look at the html you wrote that works, and compare that to the html generated by your php script. And the same goes for javascript if you use php to generate that.

Your issue is with the html

<a href="somepage" onclick="someFunction()">text</a>

The onclick event fires, and changes your background image. But you also clicked a link which tells the browser to request a new page, which means whatever happened before is replaced by a new page.

<a href="javascript:someFunction()">text</a>

This however, would tell the browser to run a javascript function and not request a new page.