Solved

how to change login image to logoff image in this case

Posted on 2012-03-23
11
293 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 108

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
 

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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

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 108

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now