is there a way to popup a small 'bubble' or 'balloon' of text when a user lets their pointer rest over a particular part of an image? (an image map)
explorer does this sometime (randomly it seems) when i let my pointer rest of an image that has alt text - it displays the alt text in a speech bubble thing - but only sometimes! so that is no good. also netscape doesn't have this and obviously i want something that'll work in both.
the reason i want to do this is this - i've got a simplyfied map (a geographical map) as a picture. there's a small piece of info i wish to show for each country, but the map is too small to allow me to put the information directly on the map - so i figured popup bubbles would be a good way.
I've built a gallery page with a popup bubble when you hover over a gate type, however this works fine on safari,firefox, but doesn't on explorer. [url]
I presume this will have to be javascript since everything I try to do in html seems to be javascript, but.......On an html form with a table, with a column header named "abc". I'd like to be able to roll over the header with a mouse and have a popup window open with information about what column "abc" contains... I don't want an alert that has to be closed, just a little tooltip or block of info or whatever that'll be visible while in the title, then disappear as soon as I move out...Same thing for a table cell or button or select list or any normal html thing. How do I do this?
Instead of doing a regular rollover which would require me to make 50 images with text in photoshop on I want the rollover but want to add the the text in html for exmaple I want something like this [URL]
In the services section with the 8 images you can see how I am TRYING to make the site work. The idea is that when scrolling over an image the related text will appear in the right column. This is to happen for each image with different text for each. The problem (as I'm sure is quite clear from using the site) is that there is a lot of jumping. When an image is not selected the images should stay in 2 columns with text to the right.
"Scroll over the images for a brief description of the services we provide." I doubt I'm describing this well but this is all new to me... I have used javascript to control these rollovers.
I don't know any Javascript except for using image rollovers with the help of Photoshop and ImageReady, so please excuse my n00b knowledge.
I am looking for a tutorial that, when you cross over an image on one part of the page, text appears on another part of the page (e.g. describing that button).
I've seen on various websites where you can roll over an image or hyper link and a text box pops up. Some are very simple looking while others have graphics. I'm assuming it's done through Javascript but I'm not sure.
I have a table with two rows and a single cell in each. The top row will house images(s) that I would like to swap out using rollover text links in a lower cell like: 1 | 2 | 3... '1' would call 'img1.jpg' into the uppermost cell, '2' would call in 'img2.jpg', etc. on rollover.I'm certain this is simple to do, but google hasn't panned out for me so I'm hoping someone can give me a snippet of code to start with and I can manipulate for my purposes.
I have 6 image buttons that I want to create a rollover caption for. So for each image, when you rollover it a text title appears and thendisappearswhen you rollout. There will be a different title for each image and will be located in the sameposition. I'd also like to have the text fade in and out if it's not to complicated.I already have the following code to create a smooth image rollover:
I'm working on a website and am having trouble figuring out where I can add/edit the text for the navigation buttons, HOME, ABOUT, CONTACT, etc. There is a rollover.js file and the rollover effect works fine, I just can't figure out where to put the text for the navigation buttons and after a week of trying different things I thought I'd come here and try to get it working. My meager JS knowledge isn't enough. I started this website from a template in case you're wondering. Here's some of the code starting with where the images are preloaded then a few lines farther on are the onmouseover and onmouseouts.
I'd like to show tree structures using collapsible multi-level nested <ul> lists (with open/closed "disclosure triangles" as list-style-images). Something like this:
Clicking on the text following <li> (or on the list-style-image) collapses/expands the rest of the content of that <li> (not shown here).
The problem is that each click bubbles up to the topmost list item. That is, a click on "Level 2" first executes the innermost <li> onclick handler, then the one for the next-outer-level <li> and so on. How can I make it so that only the handler for the <li> that's clicked is executed? (returning false from onclick didn't help in IE 6)
(I know I could wrap the text in <span>s and add the onclick handlers to those instead, but that's a bit ugly, and the list-style-image would be out of action).
I have navigation buttons that I'll call primary buttons. I also have secondary navigation buttons that I'll call secondary buttons. If you rollover a primary navigation button, it should make secondary navigation buttons 1,4,and 5 go to rollover state A. However, if you rollover secondary navigation button 1,4 or 5 they should go to rollover state B.So the simplest way I can explain it is that the secondary navigation buttons need two rollover states possible.
Before, I had an iframe, and when I moused over a link outside the iframe, it would load a page into the iframe. Background image was part of the page loaded, as well as the text and what not. The problem was, the image took too long to load. I've been learning how to do javascript and I came across some code for preloading an image before the mouseover so there was zero wait time. For the past few days I've been trying to figure out how to have the preload image appear BENEATH the iframe (now with no background image or color) with the allowtransparency attribute set to true.
I've figured out the code to do both individually, i.e. I have the code so that when the link is moused over, the new image will appear; AND I have the code so that when the link is moused over, the page with load into the iframe. Both work, both do what is expected, but they don't do it together.Below is the script. Here's where it's confusing. If I have the "setupImgRollover..." first inside the if statement: the page loads into the iframe, but there is no image. If I have the "setupImgRollover..." after the "document.link..." commands in the if statement: the image appears but the page does not load into the iframe.
HTML Code:
window.onload = rolloverInit; function rolloverInit() { for (var i=0; i<document.links.length; i++) { var linkObj = document.links[i];
I am using the lava lamp plugin on my navigation page and I am having trouble fixing an issue I have got. I have it working perfectly, it sits right within he height of the nav and when I rollover it works. The only problem I have is when I rollover the lavalamp line does not align with the navigation text. I have attached a screen shot so you can see how it is working and if you wanted to have a look I have attached the code:
This is the CSS; Copy code ul, li { margin: 0; padding: 0; } #line { width:auto; height:15px; position: absolute; z-index: 1; top: 35px; float:right; .....
This is the Jquery; Copy code (function($) { $.fn.spasticNav = function(options) { options = $.extend({ overlap : 20, speed : 500, reset : 2000, color : 'none', easing : 'easeOutExpo' }, options); .....
I used the "CreateBubblePopup", filling it with html directly in javascript. Until now, it was working fine. For some reasons, now I need to write this HTML inside the page (in a hidden div), and then load this html inside the bubble when it's created. Here is the code :
HTML : <a class="bubble" href="..." > <img alt="Détail" src="plus.png" /> <div class="hidden">Here is the HTML that will be displayed in the bubble.</div> </a>
[Code]....
It seams that my "popupHtml" variable is always null, no matter what the html in the hidden div is.
For each link I pull a few pieces of info for each, link name, link URL and a brief description. When a user clicks on the link I need to display a message that they are leaving the site and allow them to cancel or continue off the site. This can be either a bubble pop-up above/below the link or a modal window, displaying the 3 details (URL, Name, description) with an option to cancel and close the new bubble pop-up/modal window.
Yahoo News does an excellent job of the bubble pop-up but it's probably much more coding than I have time for. So my question is, is there code out there that I can implement on my site for this? I'm somewhat familiar with jQuery so if there's an existing example for this I'd love to hear about it.
the problem is that when i move mouse into the "offer" div within the div i put my mouse from the div with "Add" over "Search" the onmouseout event is triggerd and the wtf() function is fired. and i want to fire wtf() only when i pull my mouse out of the whole "offer" (container) div.
I'm a JavaScript newbie and I am trying to create a situation where a user clicks a button, a popup is launched in which they have a textarea to enter some text. Once they hit submit, the popup should disapear and a certain text element on the previous page should be updated to show what they entered.Its like this, but obviously it wouldn't be on the same page:[URL]updating text based on user input. I have the popup part working just fine:
index.php <script type="text/javascript"> <!-- function editText() {
I have a form, and one of the text boxes should be a URL to an image. I have a link to popup an image-upload script. On that popup, after they upload the file, they'll have a URL. I don't want to give specific instructions to "Copy paste the URL into the form". I want it so that they'll click a button called "Insert into Form" and it'll automatically close the popup and insert the URL into the text box.
