Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 336
  • Last Modified:

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
0
Johnny
Asked:
Johnny
  • 8
  • 2
1 Solution
 
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
 
Ray PaseurCommented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 8
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now