|
HTML - How To Put A Iframe Over A Mapped Image?
Yes i was woundering how, can someone tell me? thanks.
Similar TutorialsHi Guys, I have an online store selling furniture and at the moment I have a simple GIF that cycles through images on my homepage. I have it image mapped so that when you click on any of the pictures in the moving GIF, it redirects the person to my 'all products' page. However, what I would like it to do is when you click on the 'cushions' slide for example it takes you to the 'cushions' page and when you click on the 'beds' slide it takes you to the 'bed' page. Is this possible? Heres a link to it so you can see what i'm talking about http://www.stylechicinteriors.com Thank you so much in advance, this has been driving me crazy! Tegan I'm brand new to writing script but my boss wants me to make this work. In the main image the water tank, pump manifold and the small pump above the tank should change into the different image when mouseovered. This is what I've come up with. ------------------------ <html> <head> <SCRIPT LANGUAGE="javascript"> <!--PRELOAD IMAGES> Original = new Image(800,542) Original.src = "http://fulfordsupply.com/frameset/images/BoilerRoom/Original.jpg.) Tank = new Image(800,542) Tank.src = "http://fulfordsupply.com/frameset/images/BoilerRoom/Tank.jpg" Pump = new Image(800,542) Pump.src = "http://fulfordsupply.com/frameset/images/BoilerRoom/Pump.jpg" Station = new Image(800,542) Station.src = "http://fulfordsupply.com/frameset/images/BoilerRoom/Station.jpg" </script> </head> <IMG NAME="Original" SRC="http://fulfordsupply.com/frameset/images/BoilerRoom/Original.jpg" USEMAP="#BoilerRoom"> <script language = javascript> <!--FUNCTIONS> <script language="javascript"> function zoomtank() { document.Original.src = Tank.src; return true; } function zoompumpstation() { document.Original.src = Station.src; return true; } function zoompump() { document.Original.src = Pump.src; return true; } function original() { document.Original.src = Original.src; return true; } </script> <!--THE MAP> <MAP NAME="BoilerRoom"> <AREA SHAPE="rect" ALT="Tank" COORDS="545,200,745,500" HREF=tank.jpg onMouseOver="zoomtank()" on MouseOut="original()"> <AREA SHAPE="rect" ALT="PumpStation" COORDS="258,207,370,345" HREF="Station.jpg" onMouseOver="zoompumpstation()" on MouseOut="original()"> <AREA SHAPE="rect" ALT="Pump" COORDS= "710,55,780,130" HREF="pump.jpg" onMouseOver="zoompump()" on MouseOut="original()"> </MAP> </html> ------------------ I've tried running it through the tryit editor @ http://www.w3schools.com/html/tryit....=tryhtml_basic but all i'm getting is the main image. The maps all work and i'm gonna fix the links eventually but I cannot for the life of me get my commands to work. I've been working on this is 9am (its 530 here now) so this is the last avenue I can think of for help. If someone could give me a helping hand I'd really appreciate it! i wanted to change the color of the outside blue caused by the hyperlink and i am having trouble. i wanted it to be only for THIS and not the rest of the page. thank you in advance! <img src="http://i702.photobucket.com/albums/ww26/Fine-TuneXP/navbarfullcopy.jpg" class="greenlink" width="804" height="15" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,50,28" alt="Home" href="http://fine-tunexp.webs.com/index.htm" class="greenlink"> <area shape="rect" coords="56,0,147,28" alt="Downloads" href="http://fine-tunexp.webs.com/Downloads.htm" class="greenlink"> <area shape="rect" coords="155,0,217,28" alt="Venus" href="http://fine-tunexp.webs.com/Tweaks.htm" class="greenlink"> <area shape="rect" coords="225,0,360,28" alt="Venus" href="http://fine-tunexp.webs.com/requests.htm" class="greenlink"> </map> EDIT: i was looking around and i saw something interesting, i cant figure out how to use it in my code but, <style type="text/css"> a:link { color:#f00; } #footerlink { color:#000; } </style> So I've actually only started using HTML about four days ago. As soon as I made a website, I decided it was time. I know everyone dislikes iFrames, etc., but it's right for my site. ;D Anywho... My first problem is that I can't seem to use image maps correctly. I've done everything; I even downloaded cutemap and some other image mapping programs. I'm not quite sure what I'm doing wrong? Can anyone here correct me on my coding or my mistake? I'm a bit confused. http://amberz.webs.com/ (Just a test site.) Even though I used image map and all, you can't click on any of the links. This is the exact HTML I've been working for this index page. HTML Code: <div style="text-align:center;"><iframe src="http://i763.photobucket.com/albums/xx280/Summer-breeze/Graphics/SummerBreezeLayout.png" width="635" height="602" scrolling="auto" frameborder="0"> <body><map id="imgmap2009712214216" name="imgmap2009712214216"><area shape="rect" alt="" title="" coords="438,297,613,340" href="http://summer-breeze.webs.com/info.htm" target="_self" /><area shape="rect" alt="" title="" coords="531,343,614,366" href="http://summer-breeze.webs.com/crew.htm" target="" /><area shape="rect" alt="" title="" coords="523,370,616,403" href="http://summer-breeze.webs.com/adoptions.htm" target="_self" /><area shape="rect" alt="" title="" coords="482,405,617,436" href="http://summer-breeze.webs.com/graphics.htm" target="_self" /><area shape="rect" alt="" title="" coords="426,438,621,473" href="http://summer-breeze.webs.com/photography.htm" target="_self" /></map></body> <iframe name="I1" id="I1" src="http://www.example.com" marginwidth="1" marginheight="1" height="343" border="0" frameborder="0" style="width: 355px" scrolling="auto"> </iframe> <!--This bit is only viewed by browsers that don't support inline frames --> Your browser doesn't support inline frames. </iframe></div> Another question I have is: How can I make it so the image is fixed? I'm probably going to have a lot of content on my site, and it's a non-repetitive image, which will just look silly. http://i763.photobucket.com/albums/x...Background.png This is the image I'll be using for the sub-pages, and if I can figure out how to image map correctly, it'll include a link back home. Thank you to anyone who can help. Sorry for sounding like such a frames/HTML n00b ahaha. my website http://www.Avalon-Press.com you see the I Frame in the Middle, i think it would look cool to have like a cool little border around it because its a little plain.. can anyone tell me how i can do this? and maybe where to go to to find some borders? i kinda want something similar to this websites. http://www.thenewaddiction.com/ or if you have any other suggestions to my website, i would totally appricate it. - Mike Perez http://www.Avalon-Press.com Hi everyone, Recently i changed my portfolio page, and the new layout I have now has a Iframe in it. But for some strange reason when I press the menu-buttons on the right side I have to press it twice Portfolio Source Code from one of the Iframe pages: HTML Code: <html>
<head>
<title>Portfolio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #000;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"><a href="Contact.html" target="_self"><img src="images/Contact_left.jpg" border="0"/></a></td>
<td width="20"><a href="Downloads.html" target="_self"><img src="images/Downloads_left.jpg" border="0"/></a></td>
<td width="20"><a href="ICT-Beheer.html" target="_self"><img src="images/ICT-Beheer_left.jpg" border="0"/></a></td>
<td width="825" align="center" valign="top" background="images/Webdesign_center.jpg"><br />
<br />
<br />
Welkom,<br />
<br />
Momenteel ben ik bezig met opvullen en indelen van de pagina's op deze site.<br />
Er zijn dus nog geen pagina's te bekijken.<br />
<br />
Kom gauw weer een keer terug zodra de website definitief af is!<br />
<br />
Mvg, Dream3R</td>
<td width="20"><a href="Portfolio.html" target="_self"><img src="images/Portfolio_right.jpg" border="0"/></a></td>
<td width="20"><a href="About.html" target="_self"><img src="images/About_right.jpg" border="0"/></a></td>
<td width="20"><a href="Home.html" target="_self"><img src="images/Home_right.jpg" border="0"/></a></td>
</tr>
</table>
</body>
</html>
I tried removing the Targets.. but no result, but its the only thing I could think of.. hi, i've a very simple html page, where i have an iframe. The problem is that i want to add some text below the iframe. however, my text keeps showing up on the right hand side of the iframe. i've looked at the tutorials discussing the tags available for iframe, but surprisingly, none seem to relevant to this. Code: <html> <body> <table border="0" cellspacing="10"> <table border="0" cellpadding="0" cellspacing="0" align="left"> <td valign="top"> <iframe src="mySource.jsp" height="700" width="600" frameborder="0" scrolling="auto"></iframe> </td> </table> This should be displayed below the iframe but actually gets displayed on the right </body> </html> any help / guidance in this will be much appreciated. thanks in advance! I have 2 IFrames on a page. I am going to end up with a long list of shows to catch-up on. Is there a way I can embed an IFrame with the list, and when you click on a show, you it will change the Playing Show http://tiny.cc/catchup <---The page I am referring to. Now here is my problem. I'm not familiar with other laguages then html and a little bit of javascript and I wanted to make a site for me and my brothers photography company. I currently using dreamweaver and have figured out the way I want to make this site. I tried using ordinary frames, but I want the website to be aligned in the middle and I could make that happen. That is why I went into iframes and a regular table on the index page. My problem now is that I have several iFrames and I want a link from one to open in another. http://www.trans4mind.com/personal_d...e/iframes3.htm here is a link for this to happen, and the simple solution is to name the frame and then target the link. but I have tried that and when the link is from one iframe to another it won't work. If the link is on the index page and target the iframe then it works. Do you have any idea why this happens? I know it's possible since the link above does it. Hi! I've been cracking my head trying to solve this: How can I insert a iframe [i.e. 300x200px] inside of another iframe [i.e. 700x500px] and pull different web content n each one? kind of concentric iframes or like a 'Donut iframe' Hi all -- I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide. I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line. I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed. Help! How do I get rid of this white space but still keep the link on the image?? [I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having] Thanks in advance! //kl PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner. CSS: Code: <style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
</head>
Nav Banner: NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space... Code: <body class="oneColFixCtr"> <!-- MAIN NAVIGATION BANNER --> <!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br /> I am coding a simple CMS project and I really like this template I found online http://www.quackit.com/html/template...example_5.html however it uses iframes. Aren't iframes out dated? Is there anyway to convert this template to work without iframes? Thanks in advance. how come my iframe code doesnt work is this correct?? <IFRAME SRC="http://www.xanga.com/miiew.html" WIDTH=630 HEIGHT=505 FRAMEBORDER=0 SCROLLING=YES ALIGN=LEFT HSPACE=15 VSPACE=15></IFRAME> thanks =] Im new to Iframes and I have a simple thing I need to do. I want to put an article from one page and open it up in an Iframe on my home page. So far what I have tried is this.(page name is news.php) <a name="news"> <p> This is the news content </p> </a> Then on the home page I want to take that news article and open it in an Iframe. I dont really know what to do here. This is as far as I got though: <iframe src="news.php/#news"> Only when I do that it shows the whole news.php page, I just want that one article. Hi I'm making a website for a project at college and we have to insert a iframe which creates a scrollbar in the content area. But how to I add content/test to make the scroll bar work? The scroll is showing, but is showing but its faded out because there isn't any text for it to scroll down. This is the code I'm using. ><iframe frameborder="0" name="content" height="500" width="798" scrolling="yes" marginheight="0" marginwidth="0" src ="michael_1.html"></iframe> hey people i am new here. can you please tell me how i make a iframe with no scroll to a certein position of a page? exp: i want to put a i frame with weather forecast in my page but only the temperature wich is not in the corner of the page. sorry about my english =) edit: i did it with this now i am wondering if i can zoom out a objecto of a page to put it in a smaller iframe. can you guys help me? Hello, i am making a website and im using an iframe and it seems to be, im doing it right, but when this page is displayed at a different resolution the iframe moves around?? Can anyone help me fix my problem? thanks for your time. I was wondering if there was a way for my iframe located on my website (which is currently loading google.com) to automatically load the specific part of the google webpage I want it to. In other words, when I go to my website, in the iframe I would like to see a specific part of a website located in the middle of the site. Right now the iframe is set to load the page at the top left corner when the size of the iframe is 200 by 200 pixels. Because of this small iframe, it is vital that I only see the part of the webpage I want to see so I dont have to scroll around in the iframe to find it. I hope someone understands what I mean... Thanks, JT Okay so i have a website and i want music to play on the website, but, if i use <embed> when the user clicks on a link, the music stops. Now i could use <iframe> but i know thats not a good idea. So is there a way to have music play and never stop until the user exits the site? also i dont want to use popups. ________ i make my own sigs I am currently redoing my fraternity school website and I am having a problem with my iFrame. I want scrolling bars but not on the pages that don't necessarily need them. I set the scrolling to "Auto" and decreased the table size of the pages that are supposed to be loaded into the iFrame but this doesn't remove the scrolling bars. Any help is greatly appreciated. Here is the link: http://apa.org.msstate.edu/ |
|||||||