how to change login image to logoff image in this case

i have a page id like to change the login image when a user logs in to a logoff image while they are loged in.
i know how to in php look for the login info so im all set there

i just dont understand how to chnage the image if there loged in for the roll over image as its in css(im not good with css)

heres my code so far.

untouched code for current image
<div id="right_column_logon">
<div class="cssnav2">
<a title="Log in to your account" href="logon.php"><img src="images/login_down2.jpg" height="61" width="17" alt="Login" /></a>
</div>
</div>

Open in new window


untouched css for current code
.cssnav2 a
{
	display: block;
	width: 15px;
	height: 61px;
	display: block;
	float: left;
	color: black;
	text-decoration: none;
	background: url(../images/login_over.jpg) no-repeat;
}

.cssnav2 img
{
	padding-top: 0px;
	width: 15px;
	height: 61px;
	border: 0
}

Open in new window



my code for changing the text at the top of the page if loged in (php code)
 <?
 if($loggedin) {
 ?>
 <a href="logout.php" class="standardnav">&nbsp;&nbsp;LogOut</a>
 <? }
 else {
?>
 <li><a href="<?php echo $url_dir; ?>logon.php" class="standardnav">Login</a></li>
 <? } ?>

Open in new window


so how do i make the image and the roll over image denote logoff when a user is loged in please
im open to using - any or -jquery / javascript / php etc for this to work

thank you in advance for any code or help you may provide
Johnny
JohnnyAsked:
Who is Participating?
 
Ray PaseurConnect With a Mentor Commented:
Since PHP is a server-side scripting language, it can generate all of the HTML and CSS.  You can have something like this:

$image = login.jpg;
if ($client_already_logged_in) $image = logout.jpg;

Then wherever you display the image, you will get the correct image from something like this:

<img src="<?php echo $image; ?>" />
0
 
Lalit ChandraCommented:
Use the jquery to solve this issue.you can do the following\

1.  Just add the jquery  js reference to your page head section.
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

2.  Change your php code as defined by you (Upper)
 <?
 if($loggedin) {
 ?>
 <a id ="aLogInfo" href="logout.php" class="standardnav">&nbsp;&nbsp;LogOut</a>
 $(function() {
       $("#aLogInfo").html("<img id='imgLogout'></img>");
  });
 <? }
 else {
?>
 <li><a  id ="aLogInfo" href="<?php echo $url_dir; ?>logon.php" class="standardnav">Login</a></li>
 $(function() {
       $("#aLogInfo").html("<img id='imgLogIn'></img>");
  });
 <? } ?>
 


4.Now Add the  css like as follow
 #imgLogIn  {
  background-image : url("../img/imgLogin.jpg");
}
#imgLogout {
  background-image : url("../img/imgLogOut.jpg");
}

Hope this will resolve this issue
0
 
JohnnyAuthor Commented:
i will not be near my test computer till Monday, ill try it out then, thanks for the nifty and prompt reply. looks like that might work out for me
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
JohnnyAuthor Commented:
@Ray_Paseur
i really like this idea for a solution
ill test it out Monday as ill be back at work then.

I believe im going to go with Ray_Paseur solution, on Monday

@ Lalit-Chandra
thanks for the possible solution, nifty idea
0
 
JohnnyAuthor Commented:
hrrrm Ray_Paseur solution does not account for the css logout roll over image.

my other problem is the code is on multiple pages grrr...

im gonna have to read the solutions a bit better to determine what to do.
this is not an easy thing
i may have to rewrite the complete area(not my code org)

sorry i been busy at work.
0
 
JohnnyAuthor Commented:
what really bites is this works great for the logoff(normal image) i just need one for the roll over now... grrr
<div class="cssnav2">
<?
$image_log = "images/login_down2.jpg";
$image_log_href ="logon.php";
if ($loggedin) {
$image_log = "images/logout_down.jpg";
$image_log_href ="logoff.php";
}
?>

<a href="<?=$image_log_href; ?>"><img src="<?=$image_log; ?>" height="61" width="17" alt=""  /></a>
</div>

Open in new window

0
 
Ray PaseurCommented:
It sounds like the script has been made unnecessarily complicated, and this may be a good time to refactor.  The general design pattern for PHP client authentication is contained in this article.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/A_2391.html

In that article you can see that there is a test-only way to call the access_control() function.  You could use that to answer the question about which image to show.  Obviously image animation should be called based on whether the situation is a logged in client or an unknown client.  But from a computer science perspective, image animation is just gratuitous and should be an afterthought of the process, not a driver!

All the best, ~Ray
0
 
JohnnyAuthor Commented:
this sorta works, the rollover image is blank

html render
<img src="images/logout_down.jpg" height="61" width="17" alt="" onmouseover="this.style='background-image : url('images/logout_over.jpg')'">

Open in new window


php code
<div class="cssnav2">
<?
$image_log = "images/login_down2.jpg";
$image_log_href ="logon.php";
$image_log_over = "images/login_over2.jpg";
if ($loggedin) {
$image_log = "images/logout_down.jpg";
$image_log_href ="logoff.php";
$image_log_over = "images/logout_over.jpg";
}
?>

<a href="<?=$image_log_href; ?>"><img src="<?=$image_log; ?>" height="61" width="17" alt="" onmouseover="this.style='background-image : url('<?=$image_log_over; ?>')'"  /></a>
</div>

Open in new window

0
 
JohnnyAuthor Commented:
im gonna close this question, by answering it and asking a new question but its the code below for mouseover thats messed up now


<img name="MyImage" src="images/logout_down.jpg" height="61" width="17" alt="" onmouseover="document.MyImage.src='images/logout_over.jpg'" onmouseout="document.MyImage.src='images/logout_down.jpg'">

Open in new window

0
 
JohnnyAuthor Commented:
thanks for the solution to the login swap
0
 
JohnnyAuthor Commented:
posted new question for this post

rollover inline image swap not working
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.