Jump to content


Photo

active link properties


  • Please log in to reply
3 replies to this topic

#1 laponac84

laponac84

    Member

  • Members
  • PipPip
  • 10 posts

Posted 21 January 2013 - 11:04 AM

how to make a:active have protperties like a:hover?
i have code below, but ... active link is same as visited or usual link

#flag:link and #flag:visited have black and white image
#flag:hover have full color image, but #flag:active not

<a href="#" id="flag" >
link1
</a>


#flag:link, #flag:visited{
background-image:url(../imege/flag/flagbw.jpg);
     display:block;
     height: 96px;
     width:128px;
     text-indent:-9999px;
     -webkit-opacity: 0.25;
  -moz-opacity: 0.25;
   opacity: 0.25;
   -webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
     } 
     #flag:hover, #flag:active{
background-image:url(../imege/flag/flag2.jpg);
     display:block;
     height: 96px;
     width:128px;
     text-indent:-9999px;
     -webkit-opacity: 1;
   -moz-opacity: 1;
   opacity: 1;
     }


#2 Love2c0de

Love2c0de

    Advanced Member

  • Members
  • PipPipPip
  • 366 posts
  • LocationThe Pleiades
  • Age:23

Posted 21 January 2013 - 02:32 PM

Active only executes during the time that the mouse button is pressed down.

For example, try this example and hold your mouse down on the link, you see that it sets the background to yellow.
<!DOCTYPE html>
<html>
<head>
<style>
a:active
{
background-color:yellow;
}
</style>
</head>
<body>

<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>Note:</b> The :active selector styles the active link.</p>

</body>
</html>

I get the feeling you mean that if you go to a certain page, while you are on that page, the link will have a different style so the user can easily determine the page he's on. Is that right?

Regards,

L2c

Edited by Love2c0de, 21 January 2013 - 02:33 PM.


#3 laponac84

laponac84

    Member

  • Members
  • PipPip
  • 10 posts

Posted 24 January 2013 - 06:25 AM

http://sportskevesti...p?zemlja=srbija
On this link, on the left side of the page, you can see menu with the flags.

hover, active, visited and link is ok... but i want to know, What do I need to add in the CSS code, to see if i read the sport news from Serbia, Serbian flags in flag menu be full color, or if you read Macedonia, Macedonian flag was in full color ...

or i mast use php code
if(country == "serbia"){
flag meni is like this
}
else is like this

#4 Christian F.

Christian F.

    Advanced Member

  • Staff Alumni
  • 3,106 posts
  • LocationNorway

Posted 24 January 2013 - 07:01 AM

You'll need to use some server-side code, to set a new class on the link that links to the page that the user requested. Quick example:
<?php
// Assume that you've retrieved and validated the page variable already.
// This variable is just for showcasing.
$page = "srbija"

if (!empty ($page)) {
    $active[$page] = " current";
} else {
    $active['index'] = " current";
}
?>

<!-- Then in your menu -->
<ul id="menu">
    <li><a href="/" class="<?php echo $active['index'] ?: ''; ?>">Main page</a></li>
    <li><a href="?page=srbjia" class="<?php echo $active['srbjia'] ?: ''; ?>">Main page</a></li>
</ul>

As stated, this is just a quick and dirty example. If you're using a template engine, you'd be using it to insert the define class definitions in the correct place.
Keeping it simple.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com