View Full Version : CSS hover state problem

07-15-2011, 11:07 PM
Hello Codingforums.com members,

I'm currently trying to develop a facebook landing page and have stumbled upon a problem. What i want to do is have the <a><img/></a> tagged objects to have a :hover effect. As in when i hover over those pictures they change to another picture. Also i need to get all of the links or <a> tags in the div with an id of "lineup" to be positioned as they are in the background. I'm not sure if i have approached this correctly by doin <a> with an <img> inside of it. Im having serious diificulties trying to figure this one out. Please help me out.


<!DOCTYPE html>

<html lang="en">
<meta charset="utf-8">

<style type="text/css" media="all">
/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */

/* Styling */
#container {
width: 520px;
height: 800px;
margin: auto;
background: url(http://img836.imageshack.us/img836/8623/backgroundv.gif) no-repeat;

/* Logo */
#logo a {
position: relative;
top: 54px;
left: 100px;

/* Lineup */
#lineup {


/* Billetter */
#billetter {
position: relative;
top: 542px;
left: 83px;

/* Sponsors */
#sponsors {
width: 520px;

#sponsors, nav {
position: relative;
top: 568px;
left: 53px;
float: left;

#Gjethuset {
position: relative;
top: 0px;
left: 36px;

#Action-Video {
position: relative;
left: 56px;
top: -2px;


<div id="container">

<!-- Background Images -->

<div id="logo">
<a id="Logo_a" href="http://www.facebook.com/event.php?eid=217737594911125" target="_blank"><img src="http://img717.imageshack.us/img717/9527/5tonelogo.gif" alt="5tone-logo" width="316" height="69"/></a>

<div id="lineup">
<a id="Runerk" href="http://www.runerk.com/" target="_blank"><img src="http://img705.imageshack.us/img705/4482/runerkoriginal.gif" alt="Rune Rk" width="81" height="19"/></a>
<a id="LuluR" href="http://soundcloud.com/lulu-rouge" target="_blank"><img src="http://img9.imageshack.us/img9/5508/lulurougeoriginal.gif" alt="Lulu Rouge" width="109" height="19"/></a>
<a id="DennisH" href="http://soundcloud.com/denis-horvat" target="_blank"><img src="http://img13.imageshack.us/img13/8601/dennishorvatoriginal.gif" alt="Dennis Horvat" width="135" height="18"/></a>
<a id="EdgarM" href="http://soundcloud.com/edgar-morris" target="_blank"><img src="http://img40.imageshack.us/img40/5871/edgarmorrisoriginal.gif" alt="Edgar Morris" width="137" height="18"/></a>
<a id="SebastianV" href="http://soundcloud.com/sebastian-vedelsby" target="_blank"><img src="http://img64.imageshack.us/img64/157/sebastianvedelsbyorigin.gif" alt="Sebastian-Vedelsby" width="196" height="18"/></a>
<a id="Worsøe" href="http://vimeo.com/23257936" target="_blank"><img src="http://img843.imageshack.us/img843/8470/worsevisualsoriginal.gif" alt="Worsøe (Visuals)" width="177" height="21"/></a>

<div id="billetter">
<a href="http://www.billetnet.dk/event/​Rune-RK-Lulu-Rouge-T-O-M-Buda-​Denis-Horvat-Sebastian-Vedelsb​y-billetter/GJH1009Q" target="_blank"<img src="http://img845.imageshack.us/img845/3913/billetnetlink.gif" alt="Billetnet" width="137" height="55"/></a>
<a id="button-billetter" href="http://www.billetnet.dk/event/​Rune-RK-Lulu-Rouge-T-O-M-Buda-​Denis-Horvat-Sebastian-Vedelsb​y-billetter/GJH1009Q" target="_blank"><img src="http://img641.imageshack.us/img641/8395/kbbilleterbutton.gif" alt="K%C3%B8b-billeter-button" width="220" height="54"/></a>

<div id="sponsors">
<a id="Pro-event" href="http://www.pro-event.dk/" target="_blank"><img src="http://img845.imageshack.us/img845/7131/proeventlink.gif" alt="Pro-Event" width="105" height="38"/></a>
<a id="Gjethuset" href="http://gjethuset.dk/" target="_blank"><img src="http://img171.imageshack.us/img171/3135/gjethusetdk.gif" alt="Gjethuset.dk" width="122" height="19"/></a>
<a id="Action-Video" href="http://www.actionvideo.dk/shop/frontpage.html" target="_blank"><img src="http://img339.imageshack.us/img339/4078/actionvideo.gif" alt="Action-Video" width="123" height="31"/></a>




07-15-2011, 11:49 PM
There are two options that I'm aware of. You could use the JavaScript "onmouseover" attribute on the anchor, or use CSS sprites and a :hover.