Khaoz Posted December 30, 2008 Share Posted December 30, 2008 Hi guys :)I would like to know/be taught the the code so that when you scroll over a LINK a small picture pops up next to that link or text.Example:I am trying to put the names of a few people on a list, and i want their picture to pop up when you mouseover/rollover each individual name.Like:Eric (on mouseover ERIC) ----> Picture.Sam (on mouseover SAM) ----> Picture.Eddy (on mouseover EDDY) ----> Picture.This code will be used for a myspace page so this criteria must apply;-"You may enter HTML/DHTML or CSS in any text field. Javascript is not allowed." -MySpace Admins.I am also using DIV layout for said myspace page. So i have no idea how the code will blend in/react/function with the layout.EDIT:I want something like this:http://www.candsdesign.co.uk/page-template...lery/layout.aspRollover the link, picture shows under itEDIT2 REQUEST #2:If this is not able to be done, perhaps you can supply me with a code to like a hidden link sorta thing(collapse/show)EX:http://forum.ninjavideo.net/viewtopic.php?pid=347297#p347297Refer to the second post in this forum to get an idea of what i am talking about.EDIT3:I have used codes like pure css, but it does not seem to work, this i believe is due to a DIV based layout that i am using which might be blocking or hiding some code, give it a shot anyways thanks :)I hope i was descriptive enough. Thanks in advance guys i really appreciate what you guys do here :]~Khaoz Link to comment Share on other sites More sharing options...
jeffman Posted December 30, 2008 Share Posted December 30, 2008 This should give you ideas. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title></title> <style type="text/css"> img.hide { display: none; position: absolute; top: 100px; left: 20px; } li.show:hover img.hide { display: block; } </style> </head> <body> <ul> <li class="show">Mike<img class="hide" src="mike.jpg"></li> <li class="show">Tom<img class="hide" src="tom.jpg"></li> </ul> </body></html> EDIT: The code works now! Link to comment Share on other sites More sharing options...
Khaoz Posted December 30, 2008 Author Share Posted December 30, 2008 This should give you ideas.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title></title> <style type="text/css"> img.hide { display: none; position: absolute; top: 100px; left: 20px; } li.show:hover img.test { display: block; } </style> </head> <body> <ul> <li class="show">Mike<img class="hide" src="mike.jpg"></li> <li class="show">Tom<img class="hide" src="tom.jpg"></li> </ul> </body></html> do i have to change or modify anything here? in the mike.jpg does it have to be an adress? or just the name of the pic? i don't have much knowledge of HTML ill try to change it to see if it will work for me thank you EDIT:It doesn't work, i think it might be because of my DIV, or myspace is blocking the code anyone have any idea why my DIV layout might be blocking something like this? Link to comment Share on other sites More sharing options...
jeffman Posted December 30, 2008 Share Posted December 30, 2008 Copy and paste my code again. I made a last-minute change when I put it on the board, but I didn't change everything, so there was a fatal mistake. I've corrected the mistake. Sorry. Link to comment Share on other sites More sharing options...
Khaoz Posted December 30, 2008 Author Share Posted December 30, 2008 Copy and paste my code again. I made a last-minute change when I put it on the board, but I didn't change everything, so there was a fatal mistake. I've corrected the mistake. Sorry. Awh man i feel bad now it dont work still. but i dont want to give you any work Would it help if you had the DIV code? because this is all that shows when i put it up,..DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> .. http-equiv="content-type" content="text/html;charset=iso-8859-1"> * Mike * Tom.. Link to comment Share on other sites More sharing options...
jeffman Posted December 31, 2008 Share Posted December 31, 2008 You should really post all the code you have. Are you just using my file or have you embedded it in something? Either way, show me the code (or better, a link) to the code that's not working. Link to comment Share on other sites More sharing options...
Khaoz Posted December 31, 2008 Author Share Posted December 31, 2008 You should really post all the code you have. Are you just using my file or have you embedded it in something? Either way, show me the code (or better, a link) to the code that's not working.is it okay if i PM you it? i don't feel comfortable sharing the code with the public Link to comment Share on other sites More sharing options...
jeffman Posted December 31, 2008 Share Posted December 31, 2008 sure Link to comment Share on other sites More sharing options...
jlhaslip Posted January 3, 2009 Share Posted January 3, 2009 Hover on "Sell Your House" on this link to see the effect, and do a view source to see the css required. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.