imagraphicx
asked on
need context roll over script help for text to show information (like NetFlix)
Hi experts.
I need the ability to show information when someone rolls over a text. Ie, when rolled-over, would reveal my static text (can use image) ON the page - NOT as a pop-up that you have to close.
Similar to Netflix movie info .....................or this site:
http://www.revelation.uk.com/beta/rollover/Autos%20-%20Text%20Link%20Ads.htm (on the text "reveal" roll-over).
I think this is more complicated that I first thought, so I've set the max points I can for your help. THANKs in advance,
DVH
I need the ability to show information when someone rolls over a text. Ie, when rolled-over, would reveal my static text (can use image) ON the page - NOT as a pop-up that you have to close.
Similar to Netflix movie info .....................or this site:
http://www.revelation.uk.com/beta/rollover/Autos%20-%20Text%20Link%20Ads.htm (on the text "reveal" roll-over).
I think this is more complicated that I first thought, so I've set the max points I can for your help. THANKs in advance,
DVH
CEHJ
You just need to unhide a hidden div. You can actually use its css visibility attribute
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Wow. Absolutely makes perfect sense (unhide a div), but I have absolutely NO CSS experience (well extremely limited - I know - I need to kick it up a notch for sure). Still this makes clean sense. Since my page is flash and tables, lots of images (it's a video-clip library for the dogwhispererdvd.com).... I wonder how I / if I / can just add a CSS that addresses JUST this feature? THANKS!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
CEHJ - thanks for the information! Since I'm a "beginner", it will really help me learn. It is a terrific link and great information. For the points, I'm splitting them because I'm actually using BOL's - it was easier for me to understand and use immediately - I have to have a prototype finished today - and I can see how this one works immediately without knowing anything myself. However, I'm giving some points to CEHJ due to it being a great resource for further learning for me. Thanks to both of you - very much!
DVH
DVH
:-)
ASKER
BOL - I have a question..... if I wanted to have it show an image on "reveal" (I have the text for the information in Images, though I can change that to regular text if this isn't possible)....how would I do that? Also thanks for the code - very nice - EASY for a "beginner" like me to just get it going -....
Anyway, I'd really like to use a graphic of the information if possible. Can I do that?
thanks again,
DVH
Anyway, I'd really like to use a graphic of the information if possible. Can I do that?
thanks again,
DVH
Sure in the div that is hidden just place an image tag. For example ...
<div id="hiddenDiv" style="display: none; background-color: #ffff99;" onmouseover="changeDiv();"
<img id="divImg" src="" width="200" height="200" />
</div>
Notice I got rid of the width in the style. You can add it back but you should make sure the image and div dimensions don't "conflict." Also, instead of using an image tag you could even just use style for the div and do a background image. You might also remove the background color from the div's style.
One other thing to point out is the id I provided to the image tag. This allows me to dynamically set the src (the image to use) in my script that shows the div. The line would be something like ...
document.getElementById('d
That assumes "Images" is an array of image file names and you want to use the first image. Let me know if you want to do something different but you can definitely use a graphic instead.
I'm glad I could help. I do like that page for the same reasons you mentioned and it has been helpful to others too. Thanks for the grade, the points and the fun question.
bol
<div id="hiddenDiv" style="display: none; background-color: #ffff99;" onmouseover="changeDiv();"
<img id="divImg" src="" width="200" height="200" />
</div>
Notice I got rid of the width in the style. You can add it back but you should make sure the image and div dimensions don't "conflict." Also, instead of using an image tag you could even just use style for the div and do a background image. You might also remove the background color from the div's style.
One other thing to point out is the id I provided to the image tag. This allows me to dynamically set the src (the image to use) in my script that shows the div. The line would be something like ...
document.getElementById('d
That assumes "Images" is an array of image file names and you want to use the first image. Let me know if you want to do something different but you can definitely use a graphic instead.
I'm glad I could help. I do like that page for the same reasons you mentioned and it has been helpful to others too. Thanks for the grade, the points and the fun question.
bol
Hello b0lsc0tt ~
Still out there? Could you care to comment on a follow up question (link below) to this most helpful example you've provided here?
https://www.experts-exchange.com/questions/24340062/RollOver-Java-Script-Sample-Interpretation.html
Best Regards, Jacob
Still out there? Could you care to comment on a follow up question (link below) to this most helpful example you've provided here?
https://www.experts-exchange.com/questions/24340062/RollOver-Java-Script-Sample-Interpretation.html
Best Regards, Jacob
Jacob,
Really late for me now but I will see if I can look at it tomorrow and post if I can. I will monitor it too to see what happens. Thanks for the heads up on it.
bol
Really late for me now but I will see if I can look at it tomorrow and post if I can. I will monitor it too to see what happens. Thanks for the heads up on it.
bol
b0lsc0tt,
Thank you for your reply and your willingness to contribute, nearly two years later!
However, I have received a solution. Your original code, supplied above was illuminating!
Best Regards, Jacob
Thank you for your reply and your willingness to contribute, nearly two years later!
However, I have received a solution. Your original code, supplied above was illuminating!
Best Regards, Jacob