Solved

how to change login image to logoff image in this case

Posted on 2012-03-23
11
302 Views
Last Modified: 2012-08-13
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
Comment
Question by:Johnny
  • 8
  • 2
11 Comments
 
LVL 7

Expert Comment

by:Lalit Chandra
ID: 37757920
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
 

Author Comment

by:Johnny
ID: 37758345
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
 
LVL 109

Accepted Solution

by:
Ray Paseur earned 500 total points
ID: 37759488
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:Johnny
ID: 37763352
@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
 

Author Comment

by:Johnny
ID: 37779093
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
 

Author Comment

by:Johnny
ID: 37779129
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
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 37779199
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
 

Author Comment

by:Johnny
ID: 37779271
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
 

Author Comment

by:Johnny
ID: 37779385
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
 

Author Closing Comment

by:Johnny
ID: 37779389
thanks for the solution to the login swap
0
 

Author Comment

by:Johnny
ID: 37779407
posted new question for this post

rollover inline image swap not working
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
html input 8 44
Force PDF to open inline as opposed to dowload 16 23
Autocomplete with Jquery Question 2 21
social media icons disappear on small screens 4 12
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question