Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Image maps and rollovers?
New Posts  All Forums:Forum Nav:

Image maps and rollovers?

post #1 of 6
Thread Starter 
Hey guys! I'm making a website, and I'm a complete noob at HTML. Can someone tell me if it's possible, and if so, how I could make a rollover for an image mapped link? I have a header that's very complex so I couldn't splice it, and had to use image maps instead to create the links. But, I just can't figure out how to do the roll overs on those links! Any tips? A snippet of human-readable HTML appreciated, thanks in advance smile.gif
post #2 of 6
Erm, you could certainly accomplish it through a means of JavaScript but that'd be a lot of big images and I'm sure there is a better way.

In my 12 years of doing web development, I've only ever had the displeasure of working with imagemaps a handful of times. Typically, there is always a better way. Without seeing your header, I can't really be much more helpful than that.

As far as the JavaScript goes, you'd either be change the src attribute in the image on mouseover or you'd be created a new image element and positioning it over the existing image. Both of which are easy to do but not something I'd want to do unless absolutely necessary. Furthermore, it makes your site dependent upon having JavaScript enabled.
     
CPUMotherboardGraphicsGraphics
i7 2600K ASUS P8Z68 Deluxe GTX 280 - Died EVGA GeForce GTX 760 Super Clocked 
RAMHard DriveOSMonitor
2x 4GB G.SKILL PC-16000 2x Corsair Force GT 120GB (RAID-0), 3TB Hitachi DS Windows 8.1 64-bit 2x Dell U2410 
MonitorKeyboardCaseMouse
1x Dell U2415 Logitec Wireless Illuminated Keyboard (K800) Fractal Design Define R3: Silver Arrow Logitec Performance Mouse MX 
CPUMotherboardGraphicsRAM
Intel Core i7 6700K Z170MX-Gaming 5 EVGA GeForce GTX 760 Super Clocked 2x G.SKILL TridentZ Series 16GB DDR4 3200 (Blac... 
Hard DriveHard DriveCoolingOS
Samsung SSD 850 EVO 500GB 3TB Hitachi HDS723030ALA640 Phanteks Slim Low-Profile 120mm PWM CPU Cooler ... Windows 10 Professional (64-bit) 
MonitorMonitorMonitorKeyboard
2x Dell U2410 1x Dell U2415 Insignia 46" NS-46L780A12 Logitec Wireless Illuminated Keyboard (K800) 
PowerCaseMouseMouse Pad
EVGA SuperNOVA 850 G2 Corsair Carbide Series Air 240 (White) Logitec Performance Mouse MX Vipamz Extended XXXL Gaming Mouse Pad (White) 
  hide details  
Reply
     
CPUMotherboardGraphicsGraphics
i7 2600K ASUS P8Z68 Deluxe GTX 280 - Died EVGA GeForce GTX 760 Super Clocked 
RAMHard DriveOSMonitor
2x 4GB G.SKILL PC-16000 2x Corsair Force GT 120GB (RAID-0), 3TB Hitachi DS Windows 8.1 64-bit 2x Dell U2410 
MonitorKeyboardCaseMouse
1x Dell U2415 Logitec Wireless Illuminated Keyboard (K800) Fractal Design Define R3: Silver Arrow Logitec Performance Mouse MX 
CPUMotherboardGraphicsRAM
Intel Core i7 6700K Z170MX-Gaming 5 EVGA GeForce GTX 760 Super Clocked 2x G.SKILL TridentZ Series 16GB DDR4 3200 (Blac... 
Hard DriveHard DriveCoolingOS
Samsung SSD 850 EVO 500GB 3TB Hitachi HDS723030ALA640 Phanteks Slim Low-Profile 120mm PWM CPU Cooler ... Windows 10 Professional (64-bit) 
MonitorMonitorMonitorKeyboard
2x Dell U2410 1x Dell U2415 Insignia 46" NS-46L780A12 Logitec Wireless Illuminated Keyboard (K800) 
PowerCaseMouseMouse Pad
EVGA SuperNOVA 850 G2 Corsair Carbide Series Air 240 (White) Logitec Performance Mouse MX Vipamz Extended XXXL Gaming Mouse Pad (White) 
  hide details  
Reply
post #3 of 6
I wrote a tutorial on how to do this without an actual image map, instead utilizing css. It is a pretty old article, but still relevant and hopefully easy to understand: http://naspinski.net/post/CSS-image-map-with-rollovers--map-of-the-United-States.aspx
post #4 of 6
Yea, that's more of the approach that I'd have taken too stupid. I simply don't like using imagemaps...
     
CPUMotherboardGraphicsGraphics
i7 2600K ASUS P8Z68 Deluxe GTX 280 - Died EVGA GeForce GTX 760 Super Clocked 
RAMHard DriveOSMonitor
2x 4GB G.SKILL PC-16000 2x Corsair Force GT 120GB (RAID-0), 3TB Hitachi DS Windows 8.1 64-bit 2x Dell U2410 
MonitorKeyboardCaseMouse
1x Dell U2415 Logitec Wireless Illuminated Keyboard (K800) Fractal Design Define R3: Silver Arrow Logitec Performance Mouse MX 
CPUMotherboardGraphicsRAM
Intel Core i7 6700K Z170MX-Gaming 5 EVGA GeForce GTX 760 Super Clocked 2x G.SKILL TridentZ Series 16GB DDR4 3200 (Blac... 
Hard DriveHard DriveCoolingOS
Samsung SSD 850 EVO 500GB 3TB Hitachi HDS723030ALA640 Phanteks Slim Low-Profile 120mm PWM CPU Cooler ... Windows 10 Professional (64-bit) 
MonitorMonitorMonitorKeyboard
2x Dell U2410 1x Dell U2415 Insignia 46" NS-46L780A12 Logitec Wireless Illuminated Keyboard (K800) 
PowerCaseMouseMouse Pad
EVGA SuperNOVA 850 G2 Corsair Carbide Series Air 240 (White) Logitec Performance Mouse MX Vipamz Extended XXXL Gaming Mouse Pad (White) 
  hide details  
Reply
     
CPUMotherboardGraphicsGraphics
i7 2600K ASUS P8Z68 Deluxe GTX 280 - Died EVGA GeForce GTX 760 Super Clocked 
RAMHard DriveOSMonitor
2x 4GB G.SKILL PC-16000 2x Corsair Force GT 120GB (RAID-0), 3TB Hitachi DS Windows 8.1 64-bit 2x Dell U2410 
MonitorKeyboardCaseMouse
1x Dell U2415 Logitec Wireless Illuminated Keyboard (K800) Fractal Design Define R3: Silver Arrow Logitec Performance Mouse MX 
CPUMotherboardGraphicsRAM
Intel Core i7 6700K Z170MX-Gaming 5 EVGA GeForce GTX 760 Super Clocked 2x G.SKILL TridentZ Series 16GB DDR4 3200 (Blac... 
Hard DriveHard DriveCoolingOS
Samsung SSD 850 EVO 500GB 3TB Hitachi HDS723030ALA640 Phanteks Slim Low-Profile 120mm PWM CPU Cooler ... Windows 10 Professional (64-bit) 
MonitorMonitorMonitorKeyboard
2x Dell U2410 1x Dell U2415 Insignia 46" NS-46L780A12 Logitec Wireless Illuminated Keyboard (K800) 
PowerCaseMouseMouse Pad
EVGA SuperNOVA 850 G2 Corsair Carbide Series Air 240 (White) Logitec Performance Mouse MX Vipamz Extended XXXL Gaming Mouse Pad (White) 
  hide details  
Reply
post #5 of 6
Thread Starter 
Quote:
Originally Posted by stupid View Post

I wrote a tutorial on how to do this without an actual image map, instead utilizing css. It is a pretty old article, but still relevant and hopefully easy to understand: http://naspinski.net/post/CSS-image-map-with-rollovers--map-of-the-United-States.aspx
Tried it, but it didn't work frown.gif
I'm giving up, gonna just make the text a link instead of using fancy buttons.
post #6 of 6
If you wish to post a screenshot or a link to what you're working on, we might be able to be of more assistance... rolleyes.gif
     
CPUMotherboardGraphicsGraphics
i7 2600K ASUS P8Z68 Deluxe GTX 280 - Died EVGA GeForce GTX 760 Super Clocked 
RAMHard DriveOSMonitor
2x 4GB G.SKILL PC-16000 2x Corsair Force GT 120GB (RAID-0), 3TB Hitachi DS Windows 8.1 64-bit 2x Dell U2410 
MonitorKeyboardCaseMouse
1x Dell U2415 Logitec Wireless Illuminated Keyboard (K800) Fractal Design Define R3: Silver Arrow Logitec Performance Mouse MX 
CPUMotherboardGraphicsRAM
Intel Core i7 6700K Z170MX-Gaming 5 EVGA GeForce GTX 760 Super Clocked 2x G.SKILL TridentZ Series 16GB DDR4 3200 (Blac... 
Hard DriveHard DriveCoolingOS
Samsung SSD 850 EVO 500GB 3TB Hitachi HDS723030ALA640 Phanteks Slim Low-Profile 120mm PWM CPU Cooler ... Windows 10 Professional (64-bit) 
MonitorMonitorMonitorKeyboard
2x Dell U2410 1x Dell U2415 Insignia 46" NS-46L780A12 Logitec Wireless Illuminated Keyboard (K800) 
PowerCaseMouseMouse Pad
EVGA SuperNOVA 850 G2 Corsair Carbide Series Air 240 (White) Logitec Performance Mouse MX Vipamz Extended XXXL Gaming Mouse Pad (White) 
  hide details  
Reply
     
CPUMotherboardGraphicsGraphics
i7 2600K ASUS P8Z68 Deluxe GTX 280 - Died EVGA GeForce GTX 760 Super Clocked 
RAMHard DriveOSMonitor
2x 4GB G.SKILL PC-16000 2x Corsair Force GT 120GB (RAID-0), 3TB Hitachi DS Windows 8.1 64-bit 2x Dell U2410 
MonitorKeyboardCaseMouse
1x Dell U2415 Logitec Wireless Illuminated Keyboard (K800) Fractal Design Define R3: Silver Arrow Logitec Performance Mouse MX 
CPUMotherboardGraphicsRAM
Intel Core i7 6700K Z170MX-Gaming 5 EVGA GeForce GTX 760 Super Clocked 2x G.SKILL TridentZ Series 16GB DDR4 3200 (Blac... 
Hard DriveHard DriveCoolingOS
Samsung SSD 850 EVO 500GB 3TB Hitachi HDS723030ALA640 Phanteks Slim Low-Profile 120mm PWM CPU Cooler ... Windows 10 Professional (64-bit) 
MonitorMonitorMonitorKeyboard
2x Dell U2410 1x Dell U2415 Insignia 46" NS-46L780A12 Logitec Wireless Illuminated Keyboard (K800) 
PowerCaseMouseMouse Pad
EVGA SuperNOVA 850 G2 Corsair Carbide Series Air 240 (White) Logitec Performance Mouse MX Vipamz Extended XXXL Gaming Mouse Pad (White) 
  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 › Image maps and rollovers?