Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › CSS image rollover help
New Posts  All Forums:Forum Nav:

CSS image rollover help

post #1 of 4
Thread Starter 
Hello, I have been teaching myself CSS lately so I can finally get out of my bad html habits. I am very happy with the website I have made, but I can not seem to figure out how to make images change on mouse rollover. I have tried following several guides and read a lot but I can't get it to work without causing other issues.

Below is the full code for my page, I would like the "donate" button to change from:
http://www.fennecgames.com/img/4.png
to
http://www.fennecgames.com/img/4a.png
on rollover.

If someone could help me out I would really appreciate it


Link to website: www.FennecGames.com
Warning: Spoiler! (Click to show)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Fennec Games - Last Shot</title>
<!-- Opera speed dial icon -->
  <link rel="apple-touch-icon"
 href="http://www.fennecgames.com/img/ico/apple-touch-icon.png">
<!-- Opera speed dial icon alt -->
  <link rel="icon" type="image/png"
 href="http://www.fennecgames.com/img/ico/logo.png">
<!-- Chrome Webstore: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/128.ico"
 sizes="128x128">
<!-- iPhone/iPod Touch: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/114.ico"
 sizes="114x114">
<!-- Google TV: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/96.ico" sizes="96x96">
<!-- iPad: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/64.ico" sizes="72x72">
<!-- Misc: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/64.ico" sizes="64x64">
<!-- iOS older iPhones/Touch: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/57.ico" sizes="57x57">
<!-- New Tab IE & Safari "Read Later" sidebar: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/32.ico" sizes="32x32">
<!-- Pinned IE 9+: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/24.ico" sizes="24x24">
<!-- Most: -->
  <link rel="icon"
 href="http://www.fennecgames.com/img/ico/16.ico" sizes="16x16">
<!-- iPad: -->
  <link rel="apple-touch-icon" sizes="114x114"
 href="http://www.fennecgames.com/img/ico/apple-touch-icon-114x114.png">
<!-- iPhone/iPod Touch: -->
  <link rel="apple-touch-icon" sizes="72x72"
 href="http://www.fennecgames.com/img/ico/apple-touch-icon-72x72.png">
<!-- Start of CSS -->
  <style type="text/css">
body{
background-image:url("http://www.fennecgames.com/img/sb.png");
background-repeat:repeat-x;
background-color:black;
}
#one {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1360px;
height: 64px;
font-weight: normal;
}
#two {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1360px;
height: 80px;
font-weight: normal;
}
#three {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1360px;
height: 821px;
font-weight: normal;
}
#threeb {
position: relative;
margin-left: auto;
margin-right: auto;
background-color:#e76e5a;
width: 1360px;
height: 1px;
font-weight: normal;
}
#container {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1360px;
font-weight: normal;
}
.foura, .fourb, .fourc {
display:inline-block;
position: relative;
margin: 0px;
background-color:#121212;
float:left;
width:452.6px;
height:40px;
color:white;
text-align:center;
font-size:26px;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}
.foura {
border-right-style:solid;
border-color:#e76e5a;
border-width:1px;
}
.fourb {
border-right-style:solid;
border-color:#e76e5a;
border-width:1px;
}
.fivea, .fiveb, .fivec {
display:inline-block;
position: relative;
margin: 0px;
background-color:#121212;
float:left;
width:404.6px;
height:600px;
color:white;
text-align:left;
font-size:12px;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
overflow: auto;
padding-right:24px;
padding-left:24px;
}
.fivea {
border-right-style:solid;
border-color:#e76e5a;
border-width:1px;
}
.fiveb {
border-right-style:solid;
border-color:#e76e5a;
border-width:1px;
}
.sixa {
display:inline-block;
position: relative;
margin: 0px;
background-color:#e76e5a;
float:left;
width:1360px;
height:1px;
}
.sixb {
display:inline-block;
position: relative;
margin: 0px;
background-color:#000000;
float:left;
width:1360px;
height:21px;
color:#535353;
text-align:left;
font-size:12px;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
padding-top:5px;
padding-bottom:1px;
}
.sixc {
display:inline-block;
position: relative;
margin: 0px;
background-color:#e76e5a;
float:left;
width:1360px;
height:2px;
}
  </style>
</head>
<body>
<div id="one"><a href="http://www.fennecgames.com/"><img
 style="border: 0px solid ; width: 315px; height: 64px;"
 alt="Image Missing" src="http://www.fennecgames.com/img/1.png"
 class="header1"></a><img class="header1"
 src="http://www.fennecgames.com/img/2.png"></div>
<div id="two">
<a href="http://www.lastshotgame.com/"><img
 style="border: 0px solid ; width: 1135px; height: 80px;"
 alt="Missing Image" class="lastshottitle"
 src="http://www.fennecgames.com/img/3.png"></a><a
 href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=XNVUT2DVZ9QXG"><img
 style="border: 0px solid ; width: 225px; height: 80px;"
 alt="Missing Image" class="lastshottitle"
 src="http://www.fennecgames.com/img/4.png"></a></div>
<div id="three">
<img src="http://www.fennecgames.com/img/img_rotation/rotate.php"></div>
<div id="threeb"></div>
<div id="container">
<div class="foura">CHANGELOG</div>
<div class="fourb">TO DO LIST</div>
<div class="fourc">KNOWN BUGS</div>
<div class="fivea">
<b>04/13/14 - Pre-Alpha 0.0.2.5</b>
<br>
-Slightly increased the chance in which Bot enemies spawn in a new area
<br>
-Improved the Bot Gatherer's avoidance system now using a system with
multiple scenarios
<br>
-Disabled roll-over sound effects to fix the volume controls, will fix
roll-over sounds at a later time
<br>
<br>
<b>04/09/14 - Pre-Alpha 0.0.2.4</b>
<br>
-Bot Gatherers will now try to avoid offensive ships
<br>
<br>
<b>04/05/14 - Pre-Alpha 0.0.2.3</b>
<br>
-Game now randomly generates a random amount of AI Light Fighters,
Heavy Fighters, and Gatherers
<br>
-Game will now save and load those AI ships as well as delete those
files when game is closed
<br>
<br>
<b>04/02/14 - Pre-Alpha 0.0.2.2</b>
<br>
-Made sprites for second player and bot
<br>
<br>
<b>04/01/14 - Pre-Alpha 0.0.2.1</b>
<br>
-Mouse cursor has changed and is now more visible
<br>
-Ship Target has changed and is now more visible
<br>
-The "Return to start screen" button was changed to "Reset and Return
to Start" and it now works
<br>
<br>
<b>03/28/14 - Pre-Alpha 0.0.2.0</b>
<br>
-Lowered FPS Cap, users should now have the same experience whether
their pc is fast or slow
<br>
-Increased speeds of everything to account for lower fps
<br>
-5.1 Earthquake a few miles from here
<br>
<br>
<b>03/25/14 - Pre-Alpha 0.0.1.9</b>
<br>
-All buttons now have a roll-over sound effect
<br>
<br>
<b>03/24/14 - Pre-Alpha 0.0.1.8</b>
<br>
-Game now deletes old files at start-up if those files exist because
the
game was closed improperly or crashed
<br>
-Sped up the start-up logo
<br>
-Fixed bug where when player returned to room that had a mothership
moving to target it would create two targets
<br>
-Fixed bug where the locations of all ships other than the mothership
where not saved
<br>
-Fixed bug where a second mothership warp target was created when the
player warped back to the mothership room
<br>
-Fixed bug where mothership would continue moving past target when the
escape menu was opened
<br>
-Fixed bug where gatherers would try to return to the mothership when
player clicked a room change arrow
<br>
<br>
<b>03/22/14 - Pre-Alpha 0.0.1.7</b>
<br>
-Fixed bug where game crashes if player returns to an empty room
<br>
-Improved saving and loading code
<br>
<br>
<b>03/21/14 - Pre-Alpha 0.0.1.6</b>
<br>
-Escape Volume bars now work as intended
<br>
-Fixed several small bugs in the escape menu
<br>
<br>
<b>03/19/14 - Pre-Alpha 0.0.1.5</b>
<br>
-Made background during escape menu
<br>
-Default background music volume is less
<br>
-Added background music volume adjustment in the Escape menu
<br>
-The Exit Game button in the escape menu now works
<br>
-The Return to Game button in the escape menu now works
<br>
-Disabled all in game buttons if escape menu is open
<br>
-Fixed mouse border problem on lower resolution monitors
<br>
<br>
<b>03/18/14 - Pre-Alpha 0.0.1.4</b>
<br>
-Made escape menu, still needs working volume adjustment and background
blurring
<br>
<br>
<b>03/12/14 - Pre-Alpha 0.0.1.3</b>
<br>
-Fixed bug that would allow player to warp further than allowed
<br>
-Created intro screen
<br>
<br>
<b>03/11/14 - Pre-Alpha 0.0.1.2</b>
<br>
-Added background music
<br>
-Made Logo
<br>
-Fixed small Bugs
<br>
<br>
<b>03/08/14 - Pre-Alpha 0.0.1.1</b>
<br>
-Created Static effect when player moves far from mothership
<br>
-Scanner now turns off static effect in the location it is in
<br>
-Scanner can now move, avoid objects, and unstuck itself
<br>
-Scanner can now be recalled into mothership
<br>
-Mothership can now only travel up to 1 area away from its current
<br>
area, unless scanner is present
<br>
-Cleaned up Developer Console
<br>
-Warp Here button improved
<br>
<br>
<b>03/07/14 - Pre-Alpha 0.0.1.0</b>
<br>
-Mothership can now warp to new areas
<br>
-Created Mothership warp in effect
<br>
-Finished dynamic saving and loading system
<br>
-Increased miner pick-up rate to 2
<br>
-Fixed various bugs
<br>
<br>
<b>03/06/14 - Pre-Alpha 0.0.0.9</b>
<br>
-Start of Changelog
<br>
*Actual Game Development started on 2/24/14
</div>
<div class="fiveb">
-Add delay between deploying ships to prevent overlap<br>
<br>
-Dynamically give Gatherers each a section to prevent conflicts between
them
<br>
<br>
-Push newly created or deployed ships slightly away from the mothership
so they wont be underneath
<br>
<br>
-Further improve Bot Gatherer avoidance
<br>
<br>
-Program the offensive ships
<br>
<br>
-Save volume level settings when game is closed, and load those levels
when game is started
<br>
<br>
-Lots More
</div>
<div class="fivec">
-Bot Gatherer sprite has problems when transferring between avoidance
scenarios
<br>
<br>
-Roll-over sound effect breaks the volume controls, roll-over sounds
disabled for now
</div>
<div class="sixa"></div>
<div class="sixb">© 2013 Matthew Navarro - Fennec Games</div>
<div class="sixc"></div>
</div>
</body>
</html>

Edited by xlastshotx - 4/21/14 at 7:36pm
Main PC
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5 6600K @ 4.65GHz 1.328v MSI Z170A Gaming M7 GTX 970 4GB FTW @ 1502Mhz CORSAIR Vengeance LPX 32GB (4 x 8GB) 
Hard DriveHard DriveCoolingMonitor
PNY Optima 240GB SSD Samsung 830 64GB SSD Custom Watercooling Loop Asus PB278Q 27" 2560x1440 
MonitorMonitorKeyboardPower
Lenovo Ll2323swA 24" 1920x1080 Dell E2414H 24" 1920x1080 Logitech G910 Orion Spectrum  Cooler Master Real Power Pro 1000W 
MouseMouse PadAudio
Logitech G900 Chaos Spectrum Logitech G440 Creative Sound Blaster Z - Sound Card 
  hide details  
Reply
Main PC
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5 6600K @ 4.65GHz 1.328v MSI Z170A Gaming M7 GTX 970 4GB FTW @ 1502Mhz CORSAIR Vengeance LPX 32GB (4 x 8GB) 
Hard DriveHard DriveCoolingMonitor
PNY Optima 240GB SSD Samsung 830 64GB SSD Custom Watercooling Loop Asus PB278Q 27" 2560x1440 
MonitorMonitorKeyboardPower
Lenovo Ll2323swA 24" 1920x1080 Dell E2414H 24" 1920x1080 Logitech G910 Orion Spectrum  Cooler Master Real Power Pro 1000W 
MouseMouse PadAudio
Logitech G900 Chaos Spectrum Logitech G440 Creative Sound Blaster Z - Sound Card 
  hide details  
Reply
post #2 of 4
You can use the pseudo-class "hover". For example:
Code:
#element {
        background-image: url(/path/to/normal.png);
}

#element:hover {
        background-image: url(/path/to/hover.png);
}

You may apply this pseudo-class to any selector (e.g. class selector, ID selector [like my example], etc).
Ol' Sandy
(28 items)
 
"Zeus"
(12 items)
 
Elite Preview
(6 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon E3-1230v3 Gigabyte GA-Z97X-UD5H-BK MSI Gaming GTX 980 Kingston 32GB (4x8) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Samsung EVO 1TB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 8 Pro 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2713HM Topre Realforce 87UB | Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Logitech G700 XTRAC Ripper XXL 
AudioAudioAudioAudio
Beyerdynamic DT-770 Pro 250ohm Schiit Bifrost DAC Schiit Asgard 2 HiVi Swan M50W 2.1 
CPUMotherboardRAMHard Drive
Intel Xeon E5-2620 Super Micro X9SRL-F-B 128GB 1333MHz LSI 9271-8i 
OSPowerCase
VMware ESXi 5.5 SeaSonic SS-400FL2 Fractal Define R3 
CPUMotherboardGraphicsRAM
Intel Core i5-3437U HP EliteBook Folio 9470m  Intel HD Graphics 4000  16GB DDR3 SDRAM 
Hard DriveOS
256GB SSD Windows 10 Insider Preview 
  hide details  
Reply
Ol' Sandy
(28 items)
 
"Zeus"
(12 items)
 
Elite Preview
(6 items)
 
CPUMotherboardGraphicsRAM
Intel Xeon E3-1230v3 Gigabyte GA-Z97X-UD5H-BK MSI Gaming GTX 980 Kingston 32GB (4x8) 
Hard DriveHard DriveHard DriveHard Drive
Plextor PX-256M5S 256GB Samsung EVO 1TB Hitachi HDS721010CLA332 Hitachi HDS723020BLA642 
Hard DriveHard DriveHard DriveOptical Drive
Hitachi HDS723020BLA642 Hitachi HUA722010CLA330 WDC WD10EARS-00Z5B1 TSSTcorp CDDVDW SH-S223B 
CoolingCoolingOSMonitor
Phanteks PH-TC14PE with TY-140's Lamptron FCv5 (x2) Windows 8 Pro 64-bit Dell U2412M 
MonitorMonitorMonitorKeyboard
Dell U2412M Dell U2212HM Dell U2713HM Topre Realforce 87UB | Ducky DK9087 G2 Pro 
PowerCaseMouseMouse Pad
Corsair AX-750 Corsair Obsidian 650D Logitech G700 XTRAC Ripper XXL 
AudioAudioAudioAudio
Beyerdynamic DT-770 Pro 250ohm Schiit Bifrost DAC Schiit Asgard 2 HiVi Swan M50W 2.1 
CPUMotherboardRAMHard Drive
Intel Xeon E5-2620 Super Micro X9SRL-F-B 128GB 1333MHz LSI 9271-8i 
OSPowerCase
VMware ESXi 5.5 SeaSonic SS-400FL2 Fractal Define R3 
CPUMotherboardGraphicsRAM
Intel Core i5-3437U HP EliteBook Folio 9470m  Intel HD Graphics 4000  16GB DDR3 SDRAM 
Hard DriveOS
256GB SSD Windows 10 Insider Preview 
  hide details  
Reply
post #3 of 4
change the image to a div
Code:
.lastshotbar {
    display: inline-block;
    border:none;
    width:1135px;
    height:80px;
    background: url('http://www.fennecgames.com/img/3.png')
}

.donate {
    display: inline-block;
    border: none;
    width:225px;
    height:80px;
    background: url('http://www.fennecgames.com/img/4.png');
}

.donate:hover {
    display:inline-block;
    background:url('http://www.fennecgames.com/img/4a.png');
}


<div id="two">
<a href="http://www.lastshotgame.com/"><div class="lastshottitle lastshotbar"></div></a><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=XNVUT2DVZ9QXG"><div class="lastshottitle donate"></div></a>
</div>
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
Core I7
(13 items)
 
  
CPUMotherboardGraphicsRAM
I7 920 rev. D0 @ 4.26Ghz EVGA X58 SLI EVGA GTX 285 OCZ XMP 3x2Gb (pc3 12800) 
Hard DriveOptical DriveOSMonitor
Western Digital Caviar Black 640Gb x 2 LG GH22LS30 openSuse 12.1 x64 HP F2105 
PowerCase
CORSAIR 850TX Cooler Master ATCS 840 
  hide details  
Reply
post #4 of 4
Thread Starter 
Many thanks to both of you! That worked great smile.gif and even better is that now I understand what I was doing incorrectly before tongue.gif Thanks again!
Main PC
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5 6600K @ 4.65GHz 1.328v MSI Z170A Gaming M7 GTX 970 4GB FTW @ 1502Mhz CORSAIR Vengeance LPX 32GB (4 x 8GB) 
Hard DriveHard DriveCoolingMonitor
PNY Optima 240GB SSD Samsung 830 64GB SSD Custom Watercooling Loop Asus PB278Q 27" 2560x1440 
MonitorMonitorKeyboardPower
Lenovo Ll2323swA 24" 1920x1080 Dell E2414H 24" 1920x1080 Logitech G910 Orion Spectrum  Cooler Master Real Power Pro 1000W 
MouseMouse PadAudio
Logitech G900 Chaos Spectrum Logitech G440 Creative Sound Blaster Z - Sound Card 
  hide details  
Reply
Main PC
(15 items)
 
  
CPUMotherboardGraphicsRAM
Intel i5 6600K @ 4.65GHz 1.328v MSI Z170A Gaming M7 GTX 970 4GB FTW @ 1502Mhz CORSAIR Vengeance LPX 32GB (4 x 8GB) 
Hard DriveHard DriveCoolingMonitor
PNY Optima 240GB SSD Samsung 830 64GB SSD Custom Watercooling Loop Asus PB278Q 27" 2560x1440 
MonitorMonitorKeyboardPower
Lenovo Ll2323swA 24" 1920x1080 Dell E2414H 24" 1920x1080 Logitech G910 Orion Spectrum  Cooler Master Real Power Pro 1000W 
MouseMouse PadAudio
Logitech G900 Chaos Spectrum Logitech G440 Creative Sound Blaster Z - Sound Card 
  hide details  
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › CSS image rollover help