Javascript roll over

As this is a programming language I thought I'd be better of posting here. Right, I am trying to achieve a roll over effect, but not just the sort where an image appears when you hover over it and then disappears when you don't. What I'm trying to achieve is the sort of thing that is viewable here on the roll over section: www.sciencedaily.com
That is you hover over the link and an image and its text / content appears but when you move off the link the content remains there until you hover over another link. How an earth do I do this? I've tried g00gling it but there's so much to the subject that finding this precise technique is proving to be rather mind boggling.
I'm still in the process of learning Javascript but this is still out of my depth, any help is really appreciated, thanks.

Thanks ra5ul,
That (more or less) solved the problem, . . . . . . but what is going on ?
I edited all sourcecode of numerous html-pages by hand and now they work the way they should in Safari.
But now every time I make a small change to any page, my web-building program changes the code back to the old syntax (which, again, all browsers can read except Safari).
Why does the problem only occur in Safari ?
I hate to put a line on the index-pages that Mac users should not try this website in Safari.
Problem is, I made these sites in Freeway and I don't want to upgrade that program because I switched to Dreamweaver and iWeb (for the simple ones).
Is there a smart work-around ?

Similar Messages

Javascript error in Safari (sequel to roll-over button problem)

Yesterday I started a thread on non-functioning roll-over buttons in Safari.
In the mean time (with the help of iBod) I founs out that the problem has got something to do with JavaScript.
The problem occurs in sites I built with FreewayPro 4.0.1
The url's:
www.wildeplantentuinen.nl
www.kunst-zin.nl
The problems occur only in Safari (2.0.2 and 3.0)and not in some other browsers (even ana IE version of 2001 works great)and probably since the last Tiger Update (10.4.11)
The JavaSriptConsole gives an "Undefined Value" error for all of the non-functioning elements on a specific line.
Any Javascript-gurus around that could help me. (I am not a code-wizard at all).

Thanks ra5ul,
That (more or less) solved the problem, . . . . . . but what is going on ?
I edited all sourcecode of numerous html-pages by hand and now they work the way they should in Safari.
But now every time I make a small change to any page, my web-building program changes the code back to the old syntax (which, again, all browsers can read except Safari).
Why does the problem only occur in Safari ?
I hate to put a line on the index-pages that Mac users should not try this website in Safari.
Problem is, I made these sites in Freeway and I don't want to upgrade that program because I switched to Dreamweaver and iWeb (for the simple ones).
Is there a smart work-around ?

Swap images while rolling over popup menu

Hello,
I've been playing with fireworks CS5 for some days now and made a first attempt on a website.
So far, i've made a navigation bar with two states in order to be able to add a simple roll over behavior, e.g. darkening text on rollover. I also have been able to make a dropdown menu (popup) via slices.
Then I decided to swap images when on nav bar headings. So far, so good.
When I did a preview in my browser, it appeared that as soon as I was leaving the nav bar, the image swapped back to the old setting. Perfect.
But when I did a mouse over on one of the dropdown menu's of the navigation bar, the image swapped back as well.. I've been trying, but didnt manage to find out how to fix this.
So, is there anyone here that knows if it is possible, and if so, how to keep images swapped to a second stage as long as the mouse is on the dropdown menu, but swaps back to the original state when leaving the dropdown and/or the navigation bar.
Thanks in advance,

Hi Bryan,
It may be possible to cheat and put this onto the button:
the option that you want is called TITLE.
if you set one of the other parameters (e.g. the label)
to be:
LABEL_TEXT" TITLE="TITLE_TEXT
basically when it adds the text onto the form it will wrap it in "
If it doesn't strip out the " from your text you should get your extra parameter.
it may slip past the portal checking.
I can't test it as I only have WebDB, but I have done something similar with javascript in WebDB.
good luck
Michael

Roll-over images

Does RoboHelp support roll-over images?
I've tried every way to insert a roll-over image into my
project, including editing the html page in dreamweaver but as soon
as I open it up in RoboHelp and generate it the images either does
not change or it is not visible.
Please advise...
Thanks,
Susy Carrillo

You might take a look at
Walter
Zorn's free tooltip utility, a really neat onMouseover
application that makes your tooltips look like popups, including
the use of links within them.
You can use it for text links or in combination with image
maps. So far, I'm using only the former, but I'll be using the
latter for some new, complex C# screens in our next version
release.
There are a few things that can trip you up, such as: all the
HTML inside the Javascript area (the
escape('Some text') portion) cannot have carriage returns;
and certain characters must be escaped with a backslash (such as
replacing double quotes with backslashed single quotes). However,
it's all explained quite well on his site. You can control
backgrounds, transparencies, images, placement, etc.
As Peter says, do all your testing in a scrub project before
going live in the real one.
Good luck,
Leon

Making Roll over images from photoshop layout

Hello Everyone,
I am working on a website and I have sliced my parts of my Photoshop file.
I have saved as a html with images as well!
How would I amek a roll over image out of the buttons I made in photoshop and sliced?

Best thing you can do is delete that HTML file from Photoshop and use the slices and build the code in Dreamweaver. You will be much better off.
The simplest solution is to save the 2 states of your button as 2 separate images then click on Insert->Image Objects->Rollover Image. Then select your before and after image. Just remember to upload the javascript file Dreamweaver creates during this process or it won't work online.

Slicing and roll over effects

I am trying to create a roll over image effect that is giving
me a hard time. I have a picture of apple pie, with 6 slices. I
wanted to have a pop up window display with the ingredients for
each slice a person rolled the mouse over.
(6 different slices making one whole pie apple, blueberry,
cherry, etc you get the idea). When I tried this in image ready, I
had the slices cut up, but the pop up window was larger than the
actual slice, so only a portion of the info displayed. Is there a
way I can create a slice and have the roll over effect or pop up
window display larger than the hotspot slice? Its kinda hard to
describe, but I think you can understand what Im trying to do. The
ingredients list is much larger then the pie slice hotspot.
I cannot get my brain around how to make this happen. I know
theres a way, I just dont know how.
Thanks for any advice on this.

A rollover replaces one image with another. You can do a
standard rollover, replacing the image your mouse rolls over or a
disjoint rollover, where you replace a different image.
A pop-up generally requires a click and is done in
JavaScript. In the pop-up window, you can specify whether or not
you have scroll bars.
You might also check into setting overlapping divs and
changing the visibility of the layers depending on mouse movement,
but...that's probably going to require you to code the JavaScript
by hand.
Anyway, what is it you want? A rollover image or a pop-up
window?

RoboHelp 8 HTML WebHelp How to display a larger image of a thumbnail by clicking on or rolling over the thumbnail?

How would you display a larger image of a thumbnail by clicking or rolling over the thumbnail?

Hi there
For a mouseover you would have to add some custom developed JavaScript. You could probably find some pre-made on the web if you poked around.
Generally speaking, any way you slice it you will be using two images. One for the thumbnail and one for the full sized image. You could employ the popup functionalty to pop up the larger image.
I used to simply create DHTML drop-downs and insert the large images in the drop-down area.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

1) Drop Down Menu 2) Roll Over Images & 3)

Does anyone know away to make these things possible on iWeb (or if it is not even possible)
1)
I'd like to have a drop down menu so that my sites are not so cluttered.
Here is an example:
http://www.drsteinhealing.com/doctor/chiropractor/2L/Encino/homepage.htm
2)
I have seen rollover images in flash, but I hear that it is possible without flash and I think it would be great to have some pictures as such for the menu. I would think this would be possible because right now there is a rollover color change to words that are links if you want it to change colors... so:
a) is flash possible on iWeb
b) even if it is not: is there a way to have rollover images and
c) can there be roll over images that are also links?
Here is an example:
http://planetrobyn.com/ (the pictures go from black and white to color and then they are also the menu)
I'm learning so it would be great to see if these things are possible. Thank you.

See these menus.The menus are HTML and CSS only.
http://www.wyodor.net/Demo/iWebeend.html
http://www.wyodor.net/_Demo/tmf/Duckmenu.html
The first menu has the menu hardcode in the published webpage.
Check the source to see how it's done.
The second menu has a textbox at the top of the page. A JavaScript in the HTML Snippet finds that textbox and place the menu in it.
This is pasted in the HTML Snippet :
<script src="../../../duckmenu/duckmenu.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">

</script>
This JavaScript places the menu in the textbox :
http://www.wyodor.net/_Demo/duckmenu/duckmenu.js
The menu at drsteinhealing is HTML/CSS only too. So if you like it, grab the code + stylesheet and use it.

Image roll over

Can someone point me in the direction to where I can
learn how to write the script for this roll over effect. Is is a
combination of Jave and Flash. Here is a link to an example of what
I am talking about.
http://www.istockphoto.com/file_search.php?action=file&text=airplanes&x=14&y=4
Thanks
Dan

I don't think that involves Flash or Java, actually. It looks
like a JavaScript function. Each thumbnail has code like this:
onmouseover="showtrail('
http://www1.istockphoto.com/file_thumbview_approve/2409748/2/istockphoto_2409748_jet.jpg', 'Jet','A
commercial airliner prepares to land.','5.0000','1','1',253,1);"
onmouseout="hidetrail();"
which refer to JavaScript functions showtrail and hidetrail.
Those functions are probably contained in one of the JavaScript
files loaded in the head of the HTML document:
<script language="javascript"
src="/js/scriptaculous/prototype.js"
type="text/javascript"></script>
<script language="javascript" src="/js/utility.js"
type="text/javascript"></script>
<script language="javascript" src="/js/search.js"
type="text/javascript"></script>
<script language="javascript" src="/js/styleswitcher.js"
type="text/javascript"></script>
<script language="javascript" src="/js/dom.js"
type="text/javascript"></script>
<script language="javascript" src="/js/sifr.js"
type="text/javascript"></script>
<script language="javascript" src="/js/popupbox.js"
type="text/javascript"></script>
<script language="javascript"
src="/js/filesearchhover.js"
type="text/javascript"></script>
<script language="javascript" src="/js/copyspace.js"
type="text/javascript"></script>
<script language="javascript" src="/js/lightbox.js"
type="text/javascript"></script>

Roll over balloons in eBay searches not poping up w/ Safari 2.0.4

Is there a setting or a technique to once again allow roll over balloons to pop up on eBay search listings? I'm referring to the "Enlarge" roll over link in the Gallery picture of search results. This is a "paid for" option that some sellers use.
I do not have "Block Pop-up Windows" checked off in the Security Preference window.
Firefox still allows this, but on both a Powerbook G4 and a iMac Dual Core using Safari Version 2.0.4 (419.3) this feature is no longer working for me. (It had worked in Safari until three days ago...could I have inadvertaently changed something?)
For an example of a roll over balloon try searching eBay for an item of interest, and then scan down the resulting list. Typically a few items in large search results will have the "Enlarge" roll over below the gallery picture of an item being sold.
24" iMac 2.16 Dual Core Mac OS X (10.4.8) Also, Powerbook 17" G4 & Powerbook G3

Thanks again.
BTW... I just received this from eBay in regard to my questioning them about this problem. As you said, they seem to be disregarding Safari.
Dear eBay Member,
Thank you for writing eBay in regard to the problem you are experiencing
while trying to list your item using the Safari browser.
If you are using OS X 10.2.x or higher, I would like to suggest using
the Firefox browser. This browser seems to be the most compatible format
for Macintosh users for eBay Picture Services.
If you don't already have this browser installed on your computer,
please visit the following page to download the Firefox browser:
http://www.mozilla.org/products/firefox/all
Once the page loads, please select which language you would like to
download, and click on the link under the Mac OS X column.
If you are using OS X 10.2.8 or older, I would then recommend using the
Netscape browser. If you don't have this browser installed on your
computer, please visit the following page:
http://browser.netscape.com/ns8/download/archive72x.jsp
Thank you for being a valuable member of the eBay community. Have an
enjoyable time shopping and selling on eBay!
Sincerely,
Adam
eBay Customer Support
Powerbook 17" G4 & 24" iMac 2.16 Dual Core Mac OS X (10.4.8) Also, Powerbook G3 250 / OS 9

How can i change the color of the text on a button in Roll Over or Click state (Cs5.5)

Hello,
Here is the problematic:
1° How can i change the color of the text on a button in Roll Over or Click state (Cs5.5)
- I've many button in a doc im creating
- the color of the buttons is white with black stoke & black text
- in roll over state i want them to inverse the color coding (the text white & bottom black)
- currently the text becomes invisible as black on black cant be seen (ive stroked it white but that looks ugly)
- i would just like to know if there is a function made for this?
My other questions:
2° Ive a presentation on which Ive created buttons which tigger pop-up animations
- i have 5 buttons which trigger animations
- the viewer can chose to Click on any of the buttons randomly
- the problem is once the animation is open how can it be close... either:
a) by it self after "40" seconds
b) when ther viewer clicks another button
3° Ive created buttons linking pages..
- "go to page xxx"
- when i do a preview and click on the buttons the links dont take me to the right pages
- is that normal? (maybe in preview its suppose to be like that)
4° I would like to intergrate YouTube videos in the presentation so they play inside the docment.. when i tried.. it said the 'link isnt a flash video'
- what should i do?
5° Once i export it into Swf. how how can i visualize it? or put it online?
Thank you for your time.

stlbbl4u wrote:
Hello,
Here is the problematic:
1° How can i change the color of the text on a button in Roll Over or Click state (Cs5.5)
- I've many button in a doc im creating
- the color of the buttons is white with black stoke & black text
- in roll over state i want them to inverse the color coding (the text white & bottom black)
- currently the text becomes invisible as black on black cant be seen (ive stroked it white but that looks ugly)
- i would just like to know if there is a function made for this?
You should setup Object Styles - these can also include Paragarph Styles that can be triggered when the Style is selected.
http://help.adobe.com/en_US/indesign/cs/using/WS5CEDB81A-0011-4dc9-9DE8-AC7AD4C80076a.html
My other questions:
2° Ive a presentation on which Ive created buttons which tigger pop-up animations
- i have 5 buttons which trigger animations
- the viewer can chose to Click on any of the buttons randomly
- the problem is once the animation is open how can it be close... either:
a) by it self after "40" seconds
b) when ther viewer clicks another button
I'm not sure what you mean - I don't do files with Animations
3° Ive created buttons linking pages..- "go to page xxx"
- when i do a preview and click on the buttons the links dont take me to the right pages
- is that normal? (maybe in preview its suppose to be like that)
Does it work properly when you export it to the finished file?
4° I would like to intergrate YouTube videos in the presentation so they play inside the docment.. when i tried.. it said the 'link isnt a flash video'- what should i do?
InDesign won't link directly to youtube videos. I think your best bet would be to use Downloader to download the video and embed them directly in Indesign.
5° Once i export it into Swf. how how can i visualize it? or put it online?
Thank you for your time.
You can look up how to embed a SWF file into your HTML - but it depends what you mean by "online" there's a dozen ways to get a file "online".

How do I make a textbox appear in a PDF made in InDesign CC when the cursor rolls over another textbox?

I'm trying to make a textbox appear in a PDF made in InDesign when the user rolls the cursor over another textbox, and I want it to disappear when the cursor moves off the first textbox. I've tried the following with various setting, and it's just not working for me.
Display a different button on rollover
You can create a hot spot in which clicking or mousing over an object displays another object. To do this, create two buttons, hide one of the buttons, and use the Show/Hide Button action to show and hide the target button.
Create an object to be used as the source button. In the Buttons panel, click the Convert Object To A Button icon.
Place the image you want to be used as the target button, and convert it to a button.
Select the target image and select Hidden Until Triggered at the bottom of the Buttons panel.
The image needs to be hidden in the exported document so that it can be displayed when the source button is moused over or clicked.
Select the source button and create two different actions, one to show the target image and a second to hide the target image.
If you want the image to appear when the mouse hovers over the source button, use the On Roll Over and On Roll Off events. If you want the image to appear when you click the source button and disappear when you release it, use the On Click and On Release events. In either case, use the Show/Hide Buttons action to display and hide the target button. See Make buttons interactive.
Use the Preview panel to test the buttons.

Here's more information about what I'm doing.
1. create text box with a little text
2. turn it into a button (Button 1)
3. create another text box with some text
4. turn this into a button (Button 2)
5. check "Hidden Until Triggered" for Button 2
6. For Button 1, select "On Roll Over" for Event
7. For Button 1, click + to add Action and choose "Show/Hide Buttons and Forms"
8. For Button 1, change icon next to Button 2 into eyeball (which I assume makes Button 2 visible on roll over).
9. For Button 1,, select "On Roll Off" for Event
7. For Button 1, click + to add Action and choose "Show/Hide Buttons and Forms"
8. For Button 1, change icon next to Button 2 into crossed-out eyeball (which I assume makes Button 2 invisible on roll off).
8. Export to PDF with modified smallest file size and include bookmarks and hyperlinks and include appearance for interactive elements.
Both buttons are visible in the PDF, and nothing happens with roll over and off.
What am I doing wrong?

Roll over images in a slide show

I am trying to make a slide show of before and after images for a client.
Rather than just have them all one after the other, I want all the after images to display as normal, and the before to display on hover for each slide.
I can make this work in a basic slide show when rather than adding an image to the Hero Image box, I use the fill and states.
However this only allows me to do one, as I can't add any more empty Hero Image boxes (or I don't know how to do that, is it possible?)
When I add an image via the slide show menu it appears on top of any fills, and I can't seem to give images added this way a roll over state.
Can anyone tell me how to either add extra blank Hero Image boxes, or how to apply the effect I want to the images in the Hero Image boxes.
Thanks in advance, if there is any further info I can provide about my problem, please let me know!
M

Hi,
You cannot add multiple hero image boxes within the same Slideshow. Now , you can use different slideshows for your different images but that wont give you the slideshow effect but you will be able to see all your after images at once and then if you rollover them you would be able to see the before images.
Now, In order to create the effect that you want, what I would suggest you is to use a 'Composition widget'. In the composition widget, you can make the triggers as small thumbnails for your images and in the Target you can set the fill as your after image and in rollover state you can use the before image. After this you can use the Autoplay feature available in the composition widget and you will get the desired result.
Hope this helps
Regards,
Rohit Nair

Is there a way to prevent roll-over ads from opening? Some sites are almost impossible to navigate because of this new nuisance.

For instance, www.roughstock.com is a country music website where you can see lyrics and chords for popular songs that contributors have sent in. From the main page you click on the "Cowpie" tab to enter the page where you can search for songs. If you do this I am quite sure you will experience one of the roll-over advertisements I am talking about. They are small ads which, if you touch any portion of their area, will TAKE OVER the screen and play until the advertisement is finished or until you are able to find a usually obscure 'close' button.
I've got 'pop-ups' disabled, but this new kind of ad is already resident on the page you wish to view so it is beating the system.
Also, I'm not spamming for that site, it's just the most recent site where I've experienced this problem.

It's going to get worse with crap like that as more web sites adopt HTML5 and HTML5 compatible browsers are released. There's all sorts of new tags in HTML5 that will probably be misused for displays like that.

Can I get rid of the underlined hyperlink and just have roll-over links?

In iWeb 2009, can I get rid of the underlined hyperlink and just have roll-over links?

You have to put them on the server where you are publishing your site to. Where are you hosting your site? If it's a MobileMe account then you have two options:
1 - put the photos in a folder, name it "Pics" and put that folder in your iDisk/Pictures folder. Then use the following URL: http://homepage.mac.com/YourMMe_Account_Name/.Pictures/Pic/FileName (don't forget the period before Pictures).
2 - put the "Pics" folder with image files in your iDisk/Web/Sites folder and use the following URL: http://web.me.com/YourMMe_Account_Name/FileName.
If you're hosting on a 3rd party server it would depend on if you're using a domain name or not. I'm not familiar with 3rd party servers so Wyodor, Ethmoid or someone that is will need to point the way.

Javascript roll over

Similar Messages

Maybe you are looking for