View Full Version : i'm not sure if this is suipposed to be here because
Elaborate
02-15-2003, 03:01 AM
because i dont know what type of ccode is used for this, but is there a code to make it where when you rollover somting on another image that somthing shows up in anther image?....like if i wanted it to be able to show up in the little screen onthis image when you put your mouse on the piano key?...........heres the image ii want to so you can get an idea of what i'm talking about......also if anyone has the code can yuo post it.....image i want to use (http://www.geocities.com/elabnewdesign/piano.html)
redhead
02-15-2003, 10:43 AM
could turn out quite complicated... you'd use javascript... heres how i would do it:
basically... you'd split the image up into the keys and the screen or whatever... can be trickey but there are programmes out there that can do it for you...
then you'd take the screen image... and the tag for that might be something like:
<img src="blank_screen.jpg" name="screen">
or whatever you have called it...
then you'd take the keys... with their normal src="" value and their code to change the screen image... so for each key you might do something like:
<img src="key1.jpg" onmouseover="screen.src='screen1.jpg';">
now... the blue bit is the name of the image that you want the screen to change to when you mouse over it... and the red bit is the id of the screen that you put in the screen's image tag... and then you'd have to do that for every key...
you could add a similar onmouseout value to change the screen blank again when they move the cursor away...
now... all that was quite alot... and that was only how i would do it, i expect others would have similar methods using things like absolutely positioned <div> layers...
does that help? :thumbsup:
redhead
02-15-2003, 08:43 PM
okeydokes... ive had a quick go at that,
www.geocities.com/joncaws/piano/piano.html
just save all the files and tell us if youve got any problems... obviously you'd need to put your own messages on the screens... and a preloader might be very helpful...
edit: my method does cut all the sharps and flats in half... although they're not quite right anyways... ;)
Elaborate
02-15-2003, 08:55 PM
thanks man these were both very helpful especially the second one......i have been tring to figure out the first one, but ijust couldnt figure itout...haha the rollover would work....but yea thanks guys
Elaborate
02-15-2003, 10:59 PM
oh yea! i have one more questoin for you...how did you slice the image....if you know of anyway i can get one of those slicers or somtihng could you tell me?
redhead
02-16-2003, 02:35 PM
i used a program called splitimage from http://www.thecastle.com/software.html
enjoy...:thumbsup:
[edit] umm... takea look at this thread: http://www.codingforums.com/showthread.php?threadid=770
Elaborate
02-16-2003, 04:58 PM
using this same technique is their any way i can make 2 different rollovers or whatever......like picture this okay i havent done it yet but yea try and picture it...i have a sort of radio thing okay and it has like little buttons i want the button 2 move up(emboss or somting i dont really know yet, but yea that haha) andi want the screen to change too. if there is a way to do it please tell me thanks
redhead
02-16-2003, 09:59 PM
well... in the onmouseover bit you'd have another bit like is already there....
eg: <img ... onmouseover="screen.src='screen1.jpg'; anotherimage.src=another.jpg;">
see?
Elaborate
02-23-2003, 10:27 PM
hey the second coding you all gave me aint working too well.....i have an image and i want it to have a rollover effect that alows 2 different things to show up ........i hav ean image and i want the eyes to light up and i want a section to show some text, but it wont wrok.....can somone help?
Cybertooth Tiger
02-24-2003, 12:35 AM
can be done with PhotoShop / ImageReady (7).
See it here....
http://www.kymera.co.nz/contact/misc/piano.html
Is this what you had in mind?
Tonz
Elaborate
02-24-2003, 01:31 AM
yes and can i have the code for what you did on the 5th key i believe........so i can replace with the iagers i amwanting touse?...by the way is this the same technique used in the above messages?
Cybertooth Tiger
02-24-2003, 06:57 PM
Yes, yes, and yes it is.
OK. I have redone the script so all the images appear in the screen above the key board.
have a look at the same link to have a look.
The script is on (in) the page, you just need the images. I have sent you an E-mail, it appears I can not attach any thing when I E-mail through your "Profile", so you need to E-mail me back so I can attach the folder with everything you need.
You will see images in the folder, Just create new images the same size, and name them.
the file names are:
screen-key1_over.jpg
screen-key2_over.jpg
screen-key3_over.jpg.... etc -
size= 219W X 33H
You only need to create new images to go on the screen and rename them for the key you want to effect the roll-over.
I hope this helps
Tonz
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.