Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › Mouseover help(javascript)
New Posts  All Forums:Forum Nav:

Mouseover help(javascript)

post #1 of 12
Thread Starter 
This is really simple, i know, but i'm trying to get it so when you put your mouse over a picture, it changes? tried, but it wont work... any helps?
PURE ACTION!
(14 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II X4 955 GA-990XA-UD3 NVIDIA GeForce GTX 460 Corsair  
RAMHard DriveOptical DriveOS
Corsair  2x500GB 7200.11 RAID 0 + 320GB 7200.11 1x DVD Windows 7 x64 
MonitorKeyboardPowerCase
22" Acer WS Logitech Ergo 700W OCZ GameXstream Antec 300 
Mouse
MX-600 
  hide details  
Reply
PURE ACTION!
(14 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II X4 955 GA-990XA-UD3 NVIDIA GeForce GTX 460 Corsair  
RAMHard DriveOptical DriveOS
Corsair  2x500GB 7200.11 RAID 0 + 320GB 7200.11 1x DVD Windows 7 x64 
MonitorKeyboardPowerCase
22" Acer WS Logitech Ergo 700W OCZ GameXstream Antec 300 
Mouse
MX-600 
  hide details  
Reply
post #2 of 12
do you want it to change when you put the mouse over and it to change back when you take the mouse off?
My Plug In Baby
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 4.0 GHz EVGA x58 FTW3 EVGA GTX 470 Corsair Dominator 3x2GB 
OSMonitorPowerCase
Windows 7 19" Flat Panel Acer 900W CoolerMaster CM690 
  hide details  
Reply
My Plug In Baby
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 4.0 GHz EVGA x58 FTW3 EVGA GTX 470 Corsair Dominator 3x2GB 
OSMonitorPowerCase
Windows 7 19" Flat Panel Acer 900W CoolerMaster CM690 
  hide details  
Reply
post #3 of 12
I would recommend not even using javascript, as you can do it much easier, not to mention cleaner with CSS.

I wrote a tutorial on mousover tooltips and images here:
http://www.overclock.net/web-coding/...rollovers.html

That should explain it to you - I can show you a simple way to make this work as well.

CSS:
Code:

.change_image{ 
 background-image:url(http://static.flickr.com/39/108012418_a5061b70a9.jpg); 
 display:block; 
 height: 400px; 
 width: 400px; 
}
.change_image:hover { 
 background-image: url(http://z.about.com/d/animatedtv/1/0/u/Q/ATHFgroup.jpg) ;

HTML:
Code:

<div class="change_image"></div> 

You can just straight copy this and it should work. If you need further explanation, please let me know. Good luck!
post #4 of 12
Smart person. I like smart people. Sometimes they rub off on us dumb people, and we become kinda halfway smart people, but they are still smarter and use those big words that we have to look up to understand. O.o
My Plug In Baby
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 4.0 GHz EVGA x58 FTW3 EVGA GTX 470 Corsair Dominator 3x2GB 
OSMonitorPowerCase
Windows 7 19" Flat Panel Acer 900W CoolerMaster CM690 
  hide details  
Reply
My Plug In Baby
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 4.0 GHz EVGA x58 FTW3 EVGA GTX 470 Corsair Dominator 3x2GB 
OSMonitorPowerCase
Windows 7 19" Flat Panel Acer 900W CoolerMaster CM690 
  hide details  
Reply
post #5 of 12
I am not absolutely certain, but that probably won't work on some older browsers. The hover designation isn't fully supported for elements other than a tags. IE7 is fine, but I think IE6 will not support :hover on divs. Say what you will about IE, but the vast majority of users are still using IE6. This is slowly being moved to IE7, and the technical community is moving toward FF. But in general terms IE6 is still something to content with.
Main Rig
(15 items)
 
  
Reply
Main Rig
(15 items)
 
  
Reply
post #6 of 12
Wow, a more smarter person came to the thread, and the other originally smart person got told.

You can go around a look for mouseover scripts. There are tons of royalty free ones out there.
My Plug In Baby
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 4.0 GHz EVGA x58 FTW3 EVGA GTX 470 Corsair Dominator 3x2GB 
OSMonitorPowerCase
Windows 7 19" Flat Panel Acer 900W CoolerMaster CM690 
  hide details  
Reply
My Plug In Baby
(13 items)
 
  
CPUMotherboardGraphicsRAM
i7 950 @ 4.0 GHz EVGA x58 FTW3 EVGA GTX 470 Corsair Dominator 3x2GB 
OSMonitorPowerCase
Windows 7 19" Flat Panel Acer 900W CoolerMaster CM690 
  hide details  
Reply
post #7 of 12
Quote:
Originally Posted by BFRD View Post
I am not absolutely certain, but that probably won't work on some older browsers. The hover designation isn't fully supported for elements other than a tags. IE7 is fine, but I think IE6 will not support :hover on divs. Say what you will about IE, but the vast majority of users are still using IE6. This is slowly being moved to IE7, and the technical community is moving toward FF. But in general terms IE6 is still something to content with.

Good point, in that case you could instead change it to use anchors (<a...></a> or <ul><li>'s instead of divs - i think that would be supported through IE6 wouldn't it?

I would have to check on a test machine, I dont have IE6 here...
post #8 of 12
Quote:
Originally Posted by lavieinjuste View Post
Smart person. I like smart people. Sometimes they rub off on us dumb people, and we become kinda halfway smart people, but they are still smarter and use those big words that we have to look up to understand. O.o
but that goes against my name!
post #9 of 12
Quote:
Originally Posted by TheSubtleKnife View Post
This is really simple, i know, but i'm trying to get it so when you put your mouse over a picture, it changes? tried, but it wont work... any helps?
You don't need javascript for that, although I guess you could use it. I would use CSS.
Workstation
(13 items)
 
  
CPUMotherboardGraphicsRAM
C2D E6400 @ 3.52GHz 24/7 Gigabyte GA965P-S3 eVGA GeForce 7600GT 1GB OCZ Gold DDR 2 800 @ DDR880 5-6-6-17 
Hard DriveOptical DriveOSMonitor
320GB Maxtor DiamondMax Sata 3GB/s 16X DVD+-RW XP, OSX, Slackware, FreeBSD (quad boot) 21" SUN CRT 
KeyboardPowerCaseMouse
old POS 680W Echo star + 500W generic cheap $16 full tower case, modded to the max Microsoft Laser 6000 
Mouse Pad
none 
  hide details  
Reply
Workstation
(13 items)
 
  
CPUMotherboardGraphicsRAM
C2D E6400 @ 3.52GHz 24/7 Gigabyte GA965P-S3 eVGA GeForce 7600GT 1GB OCZ Gold DDR 2 800 @ DDR880 5-6-6-17 
Hard DriveOptical DriveOSMonitor
320GB Maxtor DiamondMax Sata 3GB/s 16X DVD+-RW XP, OSX, Slackware, FreeBSD (quad boot) 21" SUN CRT 
KeyboardPowerCaseMouse
old POS 680W Echo star + 500W generic cheap $16 full tower case, modded to the max Microsoft Laser 6000 
Mouse Pad
none 
  hide details  
Reply
post #10 of 12
Quote:
Originally Posted by BFRD View Post
I am not absolutely certain, but that probably won't work on some older browsers. The hover designation isn't fully supported for elements other than a tags. IE7 is fine, but I think IE6 will not support :hover on divs. Say what you will about IE, but the vast majority of users are still using IE6. This is slowly being moved to IE7, and the technical community is moving toward FF. But in general terms IE6 is still something to content with.
it will work with both. Thats what I have used for many, many websites. That exact same CSS he posted.

edit: i used an unordered list <ul><li>......</ul> with line-style:none for horiz and normal ul without bullets for vertical
Workstation
(13 items)
 
  
CPUMotherboardGraphicsRAM
C2D E6400 @ 3.52GHz 24/7 Gigabyte GA965P-S3 eVGA GeForce 7600GT 1GB OCZ Gold DDR 2 800 @ DDR880 5-6-6-17 
Hard DriveOptical DriveOSMonitor
320GB Maxtor DiamondMax Sata 3GB/s 16X DVD+-RW XP, OSX, Slackware, FreeBSD (quad boot) 21" SUN CRT 
KeyboardPowerCaseMouse
old POS 680W Echo star + 500W generic cheap $16 full tower case, modded to the max Microsoft Laser 6000 
Mouse Pad
none 
  hide details  
Reply
Workstation
(13 items)
 
  
CPUMotherboardGraphicsRAM
C2D E6400 @ 3.52GHz 24/7 Gigabyte GA965P-S3 eVGA GeForce 7600GT 1GB OCZ Gold DDR 2 800 @ DDR880 5-6-6-17 
Hard DriveOptical DriveOSMonitor
320GB Maxtor DiamondMax Sata 3GB/s 16X DVD+-RW XP, OSX, Slackware, FreeBSD (quad boot) 21" SUN CRT 
KeyboardPowerCaseMouse
old POS 680W Echo star + 500W generic cheap $16 full tower case, modded to the max Microsoft Laser 6000 
Mouse Pad
none 
  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 › Mouseover help(javascript)