Solved

how to change login image to logoff image in this case

Posted on 2012-03-23
11
299 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

772 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