|
HTML - How To Get A Window With An Image To Pop Up When The Pointer Hovers Over A Hot Spot
I'm looking for a routine or function that allows for floating popups when the pointer is placed over a hot spot on a client-side image map. Currently there are plenty of sources for code out there that show a popup when floating over a text URL or an IMG URL, but when putting a mouse pointer over an image map the same code does not work. Even when declaring the image map an OBJECT rather than just a basic <img>.
So essentially, I want the mouse to hover over an image map, and then have a small pop up of an image show up. Thanks in advance help is greatly appreciated. Similar Tutorialshot-lyts.com--> layouts---> div overlay--> vintage swirlies vintage swirlies---> i want a hover code like the one inhere when you rollover on home/comments/friend/etcetera i want a hover like this one but i can't! i copy the code in that premade but everything disappears instead of the hover to appear Hi, I saw uses a skill to provide a greater depth of informations as users browse for movies. When a customer hovers over the graphic for a movie, the movie ID is sent to their central servers, and a bubble appears that provides more details about the movie. Again, the page is not refreshed, and the specifics for each movie aren't found in hidden form fields. This approach allows Netflix to provide more information about its movies without cluttering its pages. Now I am maintaining a web site which hosts on a H-Sphere panel. I want to adopt this way in my website. Could you please provide me any idea? Thanks Hello All, I have been developing basic websites for the last couple of years and never really done much with Hot Spots now i know how to make the hot spot HTML Code: <map name="header1Map" id="header1Map"> <area shape="rect" coords="158,11,358,138" href="#" /> </map> Now instead of going to a new page onclick i want it to make a image pop up on the same page like the program pop box but cannot seem to get the code to work here is what i have so far. HTML Code: <map name="header1Map" id="header1Map"> <area shape="rect" coords="158,11,358,138" img id="1" alt="" src="images/IMG_0596.JPG" pbshowcaption="True" pbcaption="" style="width: 150px; height: 100px;" class="PopBoxImageSmall" title="Click to magnify/shrink" onclick="Pop(this,50,'PopBoxImageLarge');" /> </map> the script works when i insert outside of hot spot. Any help is greatly appreciated. Best Regards Lee Hello, I have this code: (The important part is in bold) Code:
<html>
<head>
<style type="text/css">
.navlink a:link {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
background-color: white;
text-decoration : none;
margin: 5px;
padding: 5px;
border : 1px outset black;
display: block;
width: 150px;
text-align: center;
width: 142px
}
.navlink a:visited {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px outset gray;
display: block;
width: 142px;
}
.navlink a:hover {
font-family: Verdana, Geneva;
font-size : 80%;
font-weight : bold;
color: #000000;
text-decoration : none;
padding: 5px;
margin: 5px;
border : 1px inset black;
display: block;
background-color : #99ccff;
width: 142px;
}
.center{text-align: center}
body{font-family: Verdana, Geneva;}
h1{font-weight: bold}
</style>
</head>
<body bgcolor="#4d4d4d">
<table style="position: absolute; top: 0px; width: 850px; margin: auto; border: 3px solid #000000; background-color: white">
<tr><td class="center">
<img src="logo.png"><img src="smiley.png" style="position:absolute; left:838px; top:6px"><hr>
<p style="position:absolute; left:842px; top:118px; font-size: x-small"> First time here? Click the smiley!</p>
<table width="150" border="0" bgcolor="white" class="navlink" style="border-type: solid">
<td class="center"><a href="index.htm">Home</a></td>
<td class="center"><a href="link1.htm">Cartoons</a></td>
<td class="center"><a href="link2.htm">Guestbook</a></td>
<td class="center"><a href="link2.htm">Contact Me</a></td>
</table>
<table style="margin: 6px; border: 1px; border-style: solid"><tr><td width="650px">
<h1>Site Released
</td></tr></table>
</tr></td>
</table>
</body>
</html>
Does anyone know how to keep the smiley face and the words "First time here? Click the smiley!" In one place while the window is resized. (Preferably without having to put them in the table.) Hi, I am looking for some insight on this matter. I currently convert images to html by using fireworks to slice up td backgrounds. and then position elements on an overall table with invisible image spacers. This is very time consuming.. I am looking for an easier way to convert images to html. Is there a program that will let me accomplish this easier? I dont want to use invisible images any more. Any advantages / disadvantages in using either approach? I am looking for a program that will be wc3 compliant and multi browser compatible. Thanks for your input. You know those sites where all this information is on this one REALLY long page and they have links at the top to send you to the exact spot where you need to be? How do I make that happen? This will be for myspace but I've heard that myspace filters the "#" that is needed in the code so is there anyway around this? Hello Folks I want to be able to anchor to not only a different page, this is a simple link, but I also want to be able to go to a specific point on that new page from the original hyper link... Example; I am viewing on page "A," on my site and I want to set a link on page "A" to take me to page "B" to the word "Widget." On page "B" I have the word "Widget" 2/3rds the way down the page. I want to go further than just to the top of page "B," I want my SAME link from page "A" to take me to the word "Widget" that is near the bottom of the page "B" all in the same link. (One click) I understand I am going to need to set code at each word, this is a lot of work and this is OK.. Thank You So Very Much for any assistance David on my site (www.absoluteECW.site88.net) underneath the button Latest Blog.. i want to put in this youtube video, HOW do i get it, what code should i use? The background is set to behind, i just want to know, have it sized and everything. Anyone who can help, will give BIG props!!! please help, this is the final thing that i need Hi guys. I was hoping somebody can help me with this problem. I have an image that I would click on and it would open in another window, in a larger size. The only way I can presently do this is by using the target="_blank" code but this opens a window with scrollbars and the address bar. I would like just the image. Also with this method I have to use 2 images, a small pic, and a larger version. Is there any way to use just one size image, and have it open in a new window in a bigger size? Please look at this page to see what I would like to do, i.e. clicking on an image and have a pop-up window open up with a larger version of that image. http://www.currys.co.uk/martprd/product/seo/733683 I would appreciate any help with this. Thank you. Hi.. hopefully some one can help me on this.. I'm sure its pretty easy? If I have some text that opens a sized new window (seen at : http://www.newquaysfinest.co.uk/virt...quay-c259.html HTML Code: <a onclick="window.open('http://www.360newquay.co.uk/ripcurl/Tourviewer_boardmasters.html','','width=784,height=489,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-202.5)+'');" href="virtual-newquay-c259.html"><font color="#009900" size="5"><strong>Virtual Ripcurl Boardmasters</strong></font></a><font size="4"><font color="#cc0000"> </font><br />
what code do I have to use with for an image file to launch a similar sized window? example image: images/ripcurl_boardmasters_07.jpg please help Cheers I recently created this website to highlight a trip to New Orleans. I did something similar for a trip last summer to Africa. As you can see, the pages are designed with small image icons, and you must click on the icons in order to see a popup of the full image. However, when viewing the page on monitors with lower resolutions, some of the images create a flickering effect and prevent the viewer from seeing the larger popup image. Does anyone have any recommendations? Ideally, I'd like to find a solution that doesn't require me to resize the images. After all, they're not that big. If someone can offer a particularly good solution I'd be willing to compensate you for your time, since I intend to create numerous more travel pages like these. Thanks! Hi, Want to open a window without addressbar and menubar with loading image for the button click. i want to c the loading gif right after opening the window. its very urgent anybody help me on this Thanks, Hi, I have a background image in my website and I want it to look the same in all window resolutions. However, when I resize the browser's window and I make it smaller althuogh I can see all the contents in the page I only can see a part of my background image. My CSS is like this: Code: body.secondary {
background-image:url('images/flowers.JPG');
background-repeat:no-repeat;
background-position:right top;
background-attachment: fixed;
}
And if you need it this is the page. Many thanks! Cheers! Hi, I have been searching around but am unable to find what I'm after... I am currently using the following code to open a new window (the new window needs to be 800x600). It currently does what I want it too. But instead of clicking on the word 'enter' to open the new window, is it possible to make an image do this instead? So when the user reaches the site and clicks the image a new window will open up (but at 800x600, not just a new window). If so I would be grateful if somebody could direct me to the correct coding to use. CSS: #enter { /* border:red solid 1px; */ margin-top:-300px; margin-left:auto; margin-right:50px; height:600px; width:800px; HTML: <a href="index2.html" target=open1 onClick="myRef = window.open('','open1', 'left=50,top=0,width=800,height=600,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars =0,resizable=0,copyhistory=0');"> enter </a> Thanks Tom Hi - I am fairly new to coding but really enjoying it I am trying to create a background image effect as seen he http://www.prada.com/ and http://news.jam-factory.com/ - The background image fits to the window, without distorting the image, and bits are hidden when needed Here is my attempt: http://www.piersart.co.uk/random - but when the window is tall and thin, a black strip appears at the bottom. What am I doing wrong? I don't quite understand how to use overflow, if that is something I should be using. Do I have to use Javascript (to get window dimensions, or resize the image)? If so, how? Many thanks in advance Hi Can someone tell me how I can stop an image from moving behind a table - next to it - when the browser window is reduced? Here's the page http://www.tall-shiprace.com/2009/04/19/1247/ When I re-size (from the bottom right corner of the browser) the image floats behind the table - to the left of the image. Can this be stopped?? Hello all, I am so stuck , after spending all of last night reading and crawling across google to find coding for my problem, I am still so lost! Basically, I have a webpage which is going to have lots of small clickable images on it, and each image is going to be linked to bring up a pop up window that opens up full screen (without scroll bars, no searchbar, etc, just a window thats resizeable), which will have the image click on as a larger view. I know this is javascript coding, but each time I found solutions across the net, it was usually only for if the page had one image that was going to be made larger. If you click on this site, this shows what I'm after (and click on one of the little images).... any ideas??? Hi there, I have put a youtube video source in dreamweaver, and was wondering if anyone could tell me how i make it so the browser window the video is in clings to the video, i.e the frame is the exact size of the video. Also, however this is done, would it be the same code with images? Thanks in advance, Rob Here is the code <body> <td><a href="<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NIktYSst2mw"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NIktYSst2mw" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> </body> </html> Hi all, I am wondering if anyone know how to have a link, once clicked, open a popup window WHILE also changing the page in the existing window. I know how to code them separately, but I do not know how to combine the two actions. HTML Code: <A HREF="javascript:popUp('popup.html')">link name</A>
My site currently uses the above code to open popup windows. Any help would be much appreciated, David Here is the case. I have an HTML page that opens a pop-up. Within the popup I need upon click to open a new window. The code is as it should be according to all references: <a href="some url" target="_blank">text</a> Everything is ok with IE6 and IE7 - a new window is being opened. What happens in Firefox is very strange - tabs are shown and the currently opened popup becomes one of the tabs and the new window opens in a new tab of the pop-up window instead in a new normal window. Did anybody encounter the same problem? Any solutions? |
|||||||