Hover over hotspot - image popup? How to?

Hi, new to HTML and CSS - really no code to post, anything I try doesn't work in the slightest.
I'm trying to have an image popup directly below a hotspot on mouseover of that hotspot. I can get it to work on text, but not with the hotspot. Either doesn't work at all, or the image that is supposed to pop up is permanently at the bottom of the screen (I suppose where the coords for the hotspot map are).
Any help appreciated, thanks.

Have a look here http://forums.adobe.com/message/2248950
Gramps

Similar Messages

Info pane that loads when you hover over an image

I think by mistake I have enabled an info pane that opens when you hover over an image with the cursor. I don't know how I have done this but it is driving me mad. Can anyone help with turning this feature off?

Sounds like Tooltips. Hit the T key to toggle

Hotspot image popup?

Hey everyone,
Im very new to Dreamweaver / HTML / Javascript but im trying my best so bare with me! Currently i have a simple thumbnail image which i can trigger a larger image to appear (on top) when i roll over the thumbnail image. However im trying to trigger this event with a hotspot and not the thumbnail as i want to have several hotspots on one large image which will trigger serval different popup images on top of the large image.
My HTML and CSS i currently have to do this:
HTML:
<a class="thumbnail" href="#thumb"><img src="sales1.1_thumb.jpg" width="80px" height="60px" border="0" /><span>
<img src="sales1.2.jpg" />
</span>
</a>
CSS:
<style type="text/css">
.thumbnail:hover{
background-color: transparent;
z-index: 50;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 2px;
left: 1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 1;
left: 200px; /*position where enlarged image should offset horizontally */
</style>
This works perfect when rolling over the thumbnail image, however how can i apply this same effect by using hotspots on one image?
Thankyou for your help

Hi Zabeth,
Thanks for your reply!
How exactly can i define the hotspot and not the image as the rollover? I guess i replace the:
<a class="thumbnail" href="#thumb"><img src="sales1.1_thumb.jpg" width="80px" height="60px" border="0" /><span>
<img src="sales1.2.jpg" />
</span>
</a>
with something like:
<a class="thumbnail" href="#thumb"><map name="Map" id="Map"> <area shape="rect" coords="33,140,114,260" href="#" /></map><span>
<img src="sales1.2.jpg" />
</span>
</a>
However this obviously doesnt work! Am i on the right direction!?
Thanks

Firefox 5 Searching for images on the web is much slower than opera and my previous Firefox version. Can I turn off the useless zoom thing when I hover over an image for a few seconds?

OK, what I want to do is search for images with Google or similar search engine. This was fine in my previous FF version. The images just loaded as thumbnails, all the same size and I had to click on one to open it in a new tab or whatever I wanted to do. Now the images load all different sizes and if I hover for a moment over on, it zooms in a bit and gives me some image details. This slows image searching to the point of being very frustrating. I thought this might be a Google things, so tried other search engines. Tried switching Javascript off to speed things up, just blank grey rectangles displayed. Tried Opera and it loads basic images like Firefox used to, FAST...

The speed of image searching isn't a problem for me. The trouble is, the automatic zoom function is lightning fast and I find it disturbing to the point that it makes me feel very ill.
I very much want a way of suppressing it.

CSS code to change cursor to magnify symbol on hover over specific images

Hi to you experts out there! I'm having a problem getting my CSS code to work. (I'm using Adobe CS4 Design Premium)
The web pages I'm working on are a gallery of images, with linked thumb images to the left which when clicked show the complete image on the right of the page. All 'main images' can also be clicked on to link to the next main image along, corresponding to the order of the thumbs. However, some 'main images' when clicked on are linked to larger, full page versions of an image. In this instance I want the user to see the pointer/cursor to change from the little hand to a magnify symbol when hovering over these specific main images. This is where I can't get the css code to work/achieve this.
For your info the main images reside in '#main_image' div. There is a compound CSS Rule for the main image pic called 'main_image a img', for a 2px, white border. There is then a hover state for this 'main_image a img:hover' where the border changes colour. (the main pic is assigned the ID 'img')
I have created a new compound CSS Rule for specific main images, where I want the cursor to change to a magnify symbol, again corresponding to the '#main_image' div, named 'main_image a zoomin' and also a hover state, 'main_image a zoomin:hover'. These two still have the same border attributes as above, 'a img' and 'a img:hover' (these main pics have been assigned the ID 'zoomin'). However, this is where I have also added CSS code for the cursor change. I have tried 15 or so variations of the following, without success:
#main_image a zoomin {
     cursor: url ('images/magnify.cur'), pointer;
     [then the border attributes...]
and...
#main_image a zoomin {
     cursor: url ('images/magnify.cur'), -moz-zoom-in, auto;
     [then the border attributes...]
What am I doing wrong? This can't be difficult! Would welcome some help please!
(Within the root directory: WinVista(C)/local_sites/sjcillustration/images' there are two files 'magnify.cur' (a downloaded img) and 'magnify.png' (my custom img - created in Illustrator, which I would actually prefer to use, but can't export as a .cur file). )

Call me Capt. Obvious, but why can't you put a "magnify" icon next to or below the thumbnail image along with the words "Click to Zoom?"
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Mouse Hover Shows the Image Name

RoboHelp HTML Version 9
Hi,
In the WebHelp display in IE, the file name shows when I hover over an image.
I could put in a screen tip, but I would have to do that for every image and that will be time consuming after-the-fact.
Can anyone tell me how to change the output so the file name does not display for ALL the images. I looked in the WebHelp Settings dialog, but can't find anything in there.
Thanks!!
Natalie

For what it is worth, I believe this problem is fixed in Rh10.
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

I cannot 'add' a persona. I can only hover over it. Any clue why?

I want to add a seasonal persona skin to my homepage. I never had a problem with this until now.
I can hover over the image and my screen image changes, but when I try to add, nothing happens.
I went to tools>page info>permissions>install extensions(add-ons) and checked allow but still nothing
happens. I am running the latest FF on windows 7. I also tried uninstalling and re-installing FF.
Any help would be greatly appreciated.

Thanks for your responses. Evidently one of my extensions was causing the
problem. It wasn't the persona extensions but that probably didn't help.
I reset FF and now my personas work. I will gradually add my extensions back
and then I may find out which one was the problem.
Thanks all.

How do you set up so that you can view the alternate text on an image when you hover over it like you do in IE?

Using Mozilla at present the alternate text for an image does not pop up when you hover your mouse over the image. This is what occurs in Internet Explorer. In Mozilla Firefox you have to right click, choose Properties and then you can view the alternate text. Is there a way to set up the mouse hover? Or is there a keyboard shortcut to at least view the Properties information of an image on a webpage quicker?

The Alt attribute isn't meant to show as a tooltip on hover.
The Alt attribute is meant to show if the image isn't or can't be displayed.
The title attribute is meant to show if you hover an image or link.
*http://kb.mozillazine.org/Image_tooltips_do_not_work
Some extensions can interfere and disable the tooltip.
* [[Troubleshooting extensions and themes]]
* http://www.w3.org/TR/html401/struct/global.html#title title
* http://www.w3.org/TR/html401/struct/objects.html#alternate-text
*Popup ALT Attribute: https://addons.mozilla.org/firefox/addon/1933

How do I show multiple images when I hover over different areas with the MouseOver function?

I’ve been working on a flash simulator to show what our Expert Range Finder binocular product would look like. The idea is to hover over an area, or image and it show the range or how far the object is from you.
I have been successful in making it work with the following code below. Yet I cannot add several "range" images (or symbols) when I hover over a certain area. Can someone help me with the code? I looked for hours on the internet and I cannot get it to work. I am new to Flash but am starting to learn as much as I can. Any help is appreciated! Thanks!
Actionscript 3 Code:
img_nv.mask = mask2_mc;
mask2_mc.buttonMode=true;
mask2_mc.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
mask2_mc.addEventListener(MouseEvent.MOUSE_UP, onUp);
function onDown(e:MouseEvent):void{
mask2_mc.startDrag();
function onUp(e:MouseEvent):void{
mask2_mc.stopDrag();

Ned:
I can't thank you enough for your help! I just have a few questions left if you don't mind.
If you look at the picture, the text shows up in the "tfield" yet there is a weird symbol after "37Y" that I cannot get rid of. In the code I erased in line 29 " + " zone" " Is that the reason why it is showing a weid symbol?
One more question. I tried placing multiple ranges and text fields and they are not working. All I did was duplicate the code for the first range and text like below but I am missing something. Will you kindly help me?
Actionscript Code:
range2.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);
range2.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);
function manageMouseOver(event:MouseEvent):void{
tfield2.text = "over "+ event.currentTarget.name + " zone";
function manageMouseOut(event:MouseEvent):void{
tfield2.text = "";
range3.addEventListener(MouseEvent.ROLL_OVER, manageMouseOver, false, 0, true);
range3.addEventListener(MouseEvent.ROLL_OUT, manageMouseOut, false, 0, true);
function manageMouseOver(event:MouseEvent):void{
tfield3.text = "over "+ event.currentTarget.name + " zone";
function manageMouseOut(event:MouseEvent):void{
tfield3.text = "";
. . . .and so on for two more ranges and text fields.

I can see my thumbnails for my events in iphoto, but when I click to open the folder, no photos show up. However, when I hover over the thumbnail, it shows the flicker of images that should be inside the folder, as well as

I can see my thumbnails for my events in iphoto, but when I click to open the folder, no photos show up. However, when I hover over the thumbnail, it shows the flicker of images
that should be inside the folder, as well as # of images in each folder. It also occasionally says the following when I try to even open iphoto: "Your photo library will not be readable by previous versions of iPhoto after the upgrade. The upgrade process for very large libraries may take an hour or more to complete." So, I am scared to hit "upgrade" for fear I will never recover any of the images as the wording in this quote seems odd. The photos are not in the trash. Did I lose them all? Do you know if/how I can retrieve them?

iPhoto 08?
Try these in order - from best option on down...
1. Do you have an up-to-date back up? If so, try copy the library6.iphoto file from the back up to the iPhoto Library (Right Click -> Show Package Contents) allowing it to overwrite the damaged file.
2. Download iPhoto Library Manager and use its rebuild function. (In Library Manager it's the FIle -> Rebuild command)
This will create an entirely new library. It will then copy (or try to) your photos and all the associated metadata and versions to this new Library, and arrange it as close as it can to what you had in the damaged Library. It does this based on information it finds in the iPhoto sharing mechanism - but that means that things not shared won't be there, so no slideshows, books or calendars, for instance - but it should get all your events, albums and keywords, faces and places back.
Because this process creates an entirely new library and leaves your old one untouched, it is non-destructive, and if you're not happy with the results you can simply return to your old one.
3. If neither of these work then you'll need to create and populate a new library.
To create and populate a new *iPhoto 08* library:
Note this will give you a working library with the same Events and pictures as before, however, you will lose your albums, keywords, modified versions, books, calendars etc.
In the iPhoto Preferences -> Events Uncheck the box at 'Imported Items from the Finder'
Move the iPhoto Library to the desktop
Launch iPhoto. It will ask if you wish to create a new Library. Say Yes.
Go into the iPhoto Library (Right Click -> Show Package Contents) on your desktop and find the Originals folder. From the Originals folder drag the individual Event Folders to the iPhoto Window and it will recreate them in the new library.
When you're sure all is well you can delete the iPhoto Library on your desktop.
In the future, in addition to your usual back up routine, you might like to make a copy of the library6.iPhoto file whenever you have made changes to the library as protection against database corruption.

How to hide the Alt description when you hover over your links?

I was told that you have to have a description for images, links just about everything. But when I preview my website and hover over the links, a yellow box appears with the description of the images. How do I hide this?

You are previewing with an old (very old?) version of IE, which is the only browser on earth that does what you describe. All other browsers play by the rules and leave the alt attribute values alone (which is what they should do).
You can choose to ignore this, or 'kill' it by adding a title attribute that is empty, e.g.,
<img alt="foo" title=""...
By the way, you add alt attributes to images for accessibility reasons. People who browse with images turned off (and there are some) or people who use screen assistive devices (screenreaders) need some indication that there is an image at the point where they are looking/reading. Consequently, you would only want to add content to these alt attributes where it's important to the message of the page (i.e., a cosmetic-only image would just have an empty alt attribute value). And you only need these for images, not for any other page element....

Enlarge image from picture box when hover over

Hi,
I am just hoping i could get some help on something small that i can not seem to get to work.
I have a picture box, and when i hover over it i would like to change the image to a larger one. I am guessing that is how they give a interspersion of image been magnified when been hovered over.
I was going to use the mouseHover event but have read that it would not change back to the old image so i hacve used the mouseLeave & MouseEnter events but i does not seem to change the image.
Any help would be appreciated.
private void returnToNavPB_MouseLeave(object sender, EventArgs e)
this.returnToNavPB.Image = Properties.Resources.back_icon;
private void returnToNavPB_MouseEnter(object sender, EventArgs e)
this.returnToNavPB.Image = Properties.Resources.Largeback_icon;

Have you checked that these functions are actually executed (by putting some breakpoints or message boxes)? Also check that Largeback_icon and back_icon are different images in resources.

I accidentally quit my CC on my Macbook pro and now the cloud icon is grayed out and every time I hover over it with the mouse I get the spinning beach ball of death on the icon. I have no idea how to open it because when I use spotlight search to open it

I accidentally quit my CC on my Macbook pro and now the cloud icon is grayed out and every time I hover over it with the mouse I get the spinning beach ball of death on the icon. I have no idea how to open it because when I use spotlight search to open it it gives me a message saying "Creative Cloud is not open anymore" help!

Since you didn't include any pertinent info such as the Mac model and OS version you are running, here is some general information:
Mac OS X: Gray screen appears during startup
Depending on which OS yours came with originally - and which OS you are now running - you would either need your original install disks - you can call Apple for replacements by giving them your serial number. Or you may be able to reinstall the OS by using recovery (again, depends on which model/which OS).

How can I place a custom table over an image?

I have a graphic embedded in the Master Page at the start of every chapter like this.
I created a borderless Custom Table without the data that I want to place over the image so it looks like the text is typed on the notebook paper. I apparently can't add this to the Master Page, but I can't seem to figure out how to do this on the Body Page either. The table is the same as in my previous question but included here again for reference. While the borders are evident here, I will turn them off when I get this placed. The merged cells are for graphics that will change every Lesson. Appreciating this forum as always. Someday I hope I have enough knowledge to help other people here...
Thanks,
Laurie

Laurie,
You need to have a text frame over the area that you want your table to appear. On the Master Page, use the graphics tools to draw the text frame (Body not Background type) where you need it. Then on the Body pages insert the table. You may need to play with the positioning of the graphic on the Master Page and perhaps use the Format > Page Layout > Line Layout > Baseline Synchronization option as well as the Table Row Height properties to get things to properly align.

File Path Visible When I Hover Over Images

Hi,
I converted a PowerPoint document to a PDF. The PowerPoint document includes images (GIF, JPEG). When I hover my cursor over the image in the PDF I created I can see the file path C:\User\User Name\Photo\File Name.JPG.
Is there a setting in the PDF that I can 'unselect' so I don't see the file path when I hover over images?
Thanks,
mindforge

Please try the suggestions mentioned here : http://forums.adobe.com/message/3364072#3364072
Regards,
Deepak

Hover over hotspot - image popup? How to?

Similar Messages

Maybe you are looking for