php to change image.

jemq

I am using php, css and styleswitcher.js to change my default colour schemes for my web page.

What I would like to do is, based on the css colour theme, change the logo image.

ie css style 1 image_1, css style 2 image_2.

I thought using styleswitcher I could get a returned value and do an IF..THEN but no such luck.

Any ideas?

PS, It is not a background image....

bpat1434

Easy solution: Make it a background image 😉

Otherwise, if you're switching the style via javascript, then just give the <img> tag an ID and update the src attribute of it:

document.getElementById('myImg').src = '/path/to/new/img.png';

What code do you currently have that's not working?

jemq

Ok, Here is my code (sorry if it seems messy but I am new to this).

In header_pink.php is a logo image
In sidebar_r.php is the javascript link to choose styles.
You can checkout the results at www.prrr.org/newsite
you will notice that the words at the top of the screen remain pink, I want to change the image to another one using blue when the stylesheet is changed through styleswitcher.

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


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PRRR - Perth Rat Rescue &amp; Rehab Home Page</title>
<link href="/newsite/css/prrr_pink.css" rel="stylesheet" type="text/css" title="pink" />
<link href="/newsite/css/prrr_blue.css" rel="alternate stylesheet" type="text/css" title="blue"  />
<!--[if IE]>
<link href="/newsite/prrr_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" language="JavaScript" src="/newsite/menu_files/menu.js"></script>
<script type="text/javascript" language="JavaScript" src="/newsite/menu_files/items.js"></script>
<script type="text/javascript" language="JavaScript" src="/newsite/menu_files/template.js"></script>
<!--	<link rel="stylesheet" href="menu_files/menu.css"> -->
	<script type="text/javascript" src="/newsite/styleswitcher.js"></script>

</head>

<body onload="set_style_from_cookie()" class="thrColLiqHdr">

<div id="container">
 <div id="header">
	   <div align="center">
           <?php 
		include('header_pink.php');
	?>
		</div>
		<div align="center">
			<script type="text/javascript" language="JavaScript">
				new menu (MENU_ITEMS, MENU_TPL);
			</script>
		</div>

<!-- end #header --></div>
  <div id="sidebar1">
	<?php
		include('sidebar_r.php');
	?>
  </div>
  <div id="mainContent">
    <div id="counter">
    <?php 
		require "counter/phpcounter.php";
	?>
    </div>
    <?php 
		include('main_content.php');

?>

  </div>
  <div id="footer">
    <p align="center">&copy; PRRR - Perth Rat Rescue &amp; Rehab ABN 79 257 068 530 <br />
      A registered Not-For-Profit organisation
      <!-- end #footer -->
    </p>
  </div>
<!-- end #container --></div>
</body>
</html>

bpat1434

Well, as I said before... make it a background image. Semantically it makes sense to make than an <h1> with a <span> and inside the <span> you put Perth Rat Rescue & Rehab. THen using css you hide the span and display just the background image:

div#header h1
{
    background-color: transparent;
    background-position: left top;
    background-repeat: no-repeat;
}

div#header h1 span
{
    display: none;
}

div#header h1 /** Blue **/
{
    background-image: url(/newsite/images/prrr/prrr_words_blue.png);
}

div#header h1 /** Pink **/
{
    background-image: url(/newsite/images/prrr/prrr_words_pink.png);
}

So you'd put the first two css items in a common css file (like a basic css file) then the last two in their respective theme files. Allows you to change the image without actually changing anything in the DOM.

The other route is to change your HTML to give the img tag an ID:

<img id="prrr-header-img" width="706" height="47" align="middle" alt="PRRR - Perth Rat Rescue &amp; Rehab" src="/newsite/images/prrr/prrr_words_pink.png" />

Then in the javascript that changes the theme, just grab it by it's ID and change the source manually:

function setActiveStyleSheet(title) {
 var i, a, main;
 for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
 if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
 a.disabled = true;
 if(a.getAttribute("title") == title) a.disabled = false;
 }
 }

 document.getElementById('prrr-header-img').src = '/newsite/images/prrr/prrr_words_'+title+'.png';
}

Hope that helps.

jemq

Thanks, That helps a lot.
I would prefer to load the image itself.

jemq

Works fine except for 1 small issue,
Initially there is no theme selected so there is no image displayed.
I have tried the selected="selected" in the form options but not working.
Where would I initially load the default title variable

Thanks

bpat1434

You could always just add the default image you want to start out with in the original h1 block.