|
HTML - Image Map & Active X Controls Question
Hi all,
Im building a mock-up website for a project im working on. Since the first version was built in PPT, i dont wanna build it from scratch - so the entire website is built from image maps. The problem im having is the need to add activeX controls to some of the pages. i.e., my page (reminder - just a big photo mapped) has a right-side menu, a left-side menu and the middle of the page (square shaped) is a form with radio buttons, drop down lists, checkboxes and a submit button. as far as i understand, its impossible to add such elements to an image map. so i was thinking about writing the form section in a separate HTML file, and "call" it from the original page (the map). I just have no idea how to do that. Can i define coordinates in which that image part will be replaced with another HTML file? Thanks for any ideas/help!! Similar TutorialsHello. I am having a tough time fixing this problem I'm having. I am creating a site using web expression 2. So far, everything is working fine, except for a couple of browser issues regarding active x controls. When I open the site on firefox, which from what I've read, doesn't use active x controls, everything loads fine. But, when I open the site on IE, the latest IE8, contents of my site aren't displayed properly due to blocked active x controls. How and what can I change in my code so that people viewing my site in IE8 can see it normally? Here is the source code and css: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="en-us" http-equiv="Content-Language" /> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Facpros</title> <link rel="stylesheet" type =" text/css" href="1css.css"/> </head> <body> <script type =" text/javascript"> //code for showing/hiding div dropdown comming soon </script> <div class="head" > <div id="Navigation" style="left: 313px; top: 244px" > <ul class="nav" > <li class="notparent"><a href="location"><span>Home</span></a></li> <li class="notparent"><a href="location"><span>About Us</span></a></li> <li class="notparent"><a href="location"><span>Contact Us</span></a></li> <li class="notparent"><a href="location"><span>Leadership</span></a></li> <li class="notparent" ><a href="location"><span>Events</span></a></li> <li class="notparent"><a href="location"><span>Our Members</span></a></li> <li class="notparent"><a href="location"><span>Inquiry</span></a></li> <li class="parent"><a href="location"><span>Language</span></a></li> </ul> </div> </div> <div class ="body" > </div> <div class ="foot"> </div> </body> </html> Code: body{
background-color:gray;
background-image:url('backgroundimg.png');
}
p{
font-family:Copperplate33bc;
}
ul.nav{
font-family:Copperplate33bc;
list-style:none;
padding: 0;
margin: 0; font-size:14px;
height:29px;
}
div.head{
top:0px;
background-color:maroon;
height: 275px;
width: 1000px;
margin-left:auto;
margin-right:auto;
}
div.body{
background-color:teal;
height:600px;
width: 1000px;
margin-left:auto;
margin-right:auto;
}
div.foot{
background-color:black;
height:100px;
width: 1000px;
margin-left:auto;
margin-right:auto;
}
li.notparent{
}
li.parent{
}
a:link{
text-decoration:none;color:black;
}
a:hover{
color:white;
}
#Navigation{
width:723px;;position:relative;
}
#Navigation li
{
float: left;
display: block;
text-decoration: none;
text-align: center;
padding-left:5px;
padding-right:5px;
width:auto;
height:29px;
line-height:3em;
}
How do I create my own volume control buttons on a html page? Maybe via javascript? I am also looking how to create my own buttons for pay, pause and stop. ( I want to control embedded Windows Media Player). hi everybody, iam a learner, my mind got struck in this topic in xhtml.So i thought asking on this topic may help.Now here is the question, what are Hidden controls? what are the uses for hidden controls? and how they are used? I learned that they are used to store the form data submitted by user and send to next page while your form spans more than one page, but my mind is not so clear about this topic. so plz answer my question.plz dont paste links. Thanks and Regards. Hi there, I am creating a website using dreamweaver html and css. I am having issues embedding a .swf file to the code, it does not show in ie. I have the latest version of ie installed on my pc and I have the activeX flash player installed also. When I preview the file a banner appears saying blocked content and when you allow it nothing happens. If I am having this issue others are bound to hence I would like it resolved before the site goes live. Can any one help me please??? CODE:- HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if lt IE 6.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Future Limo Buses</title>
<style type="text/css">
<!--
body {
font-family:Verdana, Geneva, sans-serif;
border:none;
background-color:#000;
}
#Wrapper {
width:800px;
margin:0 auto;
}
#Background {
height:600px;
width:800px;
background-image:url(../future_root/Images/Background%20images/gallery.png);
background-repeat:no-repeat;
background-position:center;
}
#Logo {
border:none;
background-image:url(../future_root/Images/Misc/gold%20logo.png);
background-repeat:no-repeat;
height:89px;
width:281px;
margin-top:-570px;
margin-left:480px;
}
#PageHeader {
border:none;
background-image:url(../future_root/Images/Page%20Headers/gallery.png);
background-repeat:no-repeat;
height:26px;
width:215px;
margin-top:-50px;
margin-left:40px;
}
#Navigation {
border:none;
height:350px;
width:153px;
margin-top:103px;
margin-left:30px;
}
#Seperator {
border:none;
height:350px;
width:3px;
background-image:url(../future_root/Images/Misc/seperator.png);
background-repeat:no-repeat;
margin-top:-343px;
margin-left:190px;
}
#Links {
height:22px;
width:221px;
margin-top:-10px;
margin-left:540px;
}
#PageInfo {
border:none;
text-align:center;
height:350px;
width:550px;
margin-top:-450px;
margin-left:210px;
}
#Navigation a {
background-repeat:no-repeat;
display:block;
}
a.home, a.contact, a.links, a.testimonials, a.gallery, a.about {
margin-top:30px;
height:18px;
}
a.future {
margin-top:20px;
width:107px;
height:35px;
}
a.home {
width:49px;
}
a.links {
width:44px;
}
a.testimonials {
width:107px;
}
a.about {
width:76px;
}
a.contact {
width:90px;
}
a.gallery {
width:60px;
}
a.home:link, a.home:visited {
background-image:url(../future_root/Images/Navigation%20Bar/homewhite.png);
}
a.home:hover, a.home:active {
background-image:url(../future_root/Images/Navigation%20Bar/homegrey.png);
}
a.about:link, a.about:visited {
background-image:url(../future_root/Images/Navigation%20Bar/aboutuswhite.png);
}
a.about:hover, a.about:active {
background-image:url(../future_root/Images/Navigation%20Bar/aboutusgrey.png);
}
a.futu link, a.futu visited {
background-image:url(../future_root/Images/Navigation%20Bar/thefutureexperiencewhite.png);
}
a.futu hover, a.futu active {
background-image:url(../future_root/Images/Navigation%20Bar/thefutureexperiencegrey.png);
}
a.gallery:link, a.gallery:visited, a.gallery:hover, a.gallery:active {
background-image:url(../future_root/Images/Navigation%20Bar/gallerygrey.png);
}
a.testimonials:link, a.testimonials:visited {
background-image:url(../future_root/Images/Navigation%20Bar/testimonialswhite.png);
}
a.testimonials:hover, a.testimonials:active {
background-image:url(../future_root/Images/Navigation%20Bar/testimonialsgrey.png);
}
a.links:link, a.links:visited {
background-image:url(../future_root/Images/Navigation%20Bar/linkswhite.png);
}
a.links:hover, a.links:active {
background-image:url(../future_root/Images/Navigation%20Bar/linksgrey.png);
}
a.contact:link, a.contact:visited {
background-image:url(../future_root/Images/Navigation%20Bar/contactuswhite.png);
}
a.contact:hover, a.contact:active {
background-image:url(../future_root/Images/Navigation%20Bar/contactusgrey.png);
}
-->
</style>
</head>
<body>
<div id="Wrapper">
<div id="Background"></div>
<div id="Logo"></div>
<div id="PageHeader"></div>
<div id="Navigation">
<a class="home" href="../future_root/index.html"></a>
<a class="about" href="../future_root/aboutus.html"></a>
<a class="future" href="../future_root/future.html"></a>
<a class="gallery" href="../future_root/gallery.html"></a>
<a class="testimonials" href="../future_root/testimonials.html"></a>
<a class="links" href="../future_root/links.html"></a>
<a class="contact" href="../future_root/contactus.html"></a>
</div>
<div id="Seperator"></div>
<div id="Links">
<a href="http://www.facebook.com/pages/Future-Limo-Buses/113455505345741">
<img src="../future_root/Images/Misc/facebook.png" border="0" height="22" width="89" align="right"/>
</a>
<a href="http://www.got-the-concept.co.uk" >
<img src="../future_root/Images/Misc/copyright.png" border="0" height="22" width="121" align="left" />
</a>
</div>
<div id="PageInfo">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-44455350000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="550" height="400" id="myMovieName">
<param name="movie" value="../future_root/Images/Gallery/gallery.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<param name="wmode" value="transparent">
<embed src="../future_root/Images/Gallery/gallery.swf" quality="high" bgcolor="#FFFFFF" width="550" height="400" name="gallery" align="" type="application/x-shockwave-flash" pluginspace="http://www.macromedia.com/go/getflashplayer" wmode="transparent">
</embed>
</object>
</div>
</div>
</body>
</html>
Hello, I have a client were working with. He uses myspace. He wants a youtube video to autoplay from youtube. He wants it to look sleek and doesn't want the controls buttons to show. I've read this is possible but can't get the div code right. It's an HD video and it's height="480" width="720". We came across this url: http://www.createblog.com/myspace-sc...eo-top_bottom/ and We found this code as an example it says: Where it says YOUTUBE URL HERE insert your youtube embed url, not the url of the YouTube page. Change the first 380 and the 230 to change the video's size and the -90 to position the video. **** <div style="width:380px; height:230px; overflow:hidden!important; text-align:center;"><br /> <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="410" width="380" style="position:relative; top: -90 px;" data=" YOUTUBE URL HERE "> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="YOUTUBE URL HERE" /> <param name="wmode" value="transparent" /> </object> </div> **** This is our code were tried but it is not working? can you please help us. Thank you in advanced. Our code we tried: **** <div style="width: 720 px; height: 480 px; overflow:hidden!important; text-align:center;"><br /> <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height=" 410 " width=" 380 " style="position:relative; top: -90 px;" data=" http://www.youtube.com/v/vaKuFww3ljM&ap=%2526fmt%3D18&loop=1&controls=0&showinfo=0&autoplay=1&&iv_load_policy=3 "> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value=" http://www.youtube.com/v/vaKuFww3ljM&ap=%2526fmt%3D18&loop=1&controls=0&showinfo=0&autoplay=1&&iv_load_policy=3 " /> <param name="wmode" value="transparent" /> </object> </div> **** seems like a cool board i looked over a few things and decided to ask my question here. i have an image map but it's not behaving like i expected it to. HTML Code: <img src="/pics/imagemaps/scroll2.jpg" width="400" height="600" alt="" usemap="#scroll1" />
<map name="scroll1">
<area shape="rect" coords="1,1,100,200" onclick="decode('A1',$tries)" nohref="nohref" alt="A1" />
<area shape="rect" coords="101,1,300,200" onclick="decode('B1',$tries)" nohref="nohref" alt="B1" />
<area shape="rect" coords="301,1,400,200" onclick="decode('C1',$tries)" nohref="nohref" alt="C1"/>
<area shape="rect" coords="1,1,100,400" onclick="decode('A2',$tries)" nohref="nohref" alt="A2"/>
<area shape="rect" coords="101,1,300,400" onclick="decode('B2',$tries)" nohref="nohref" alt="B2"/>
<area shape="rect" coords="301,1,400,400" onclick="decode('C2',$tries)" nohref="nohref" alt="C2"/>
<area shape="rect" coords="1,1,100,600" onclick="decode('C3',$tries)" nohref="nohref" alt="A3"/>
<area shape="rect" coords="101,1,300,600" nohref="nohref" alt="B3"/>
<area shape="rect" coords="301,1,400,600" nohref="nohref" alt="C3"/>
</map>
the problem i'm having is that i can't get the cursor to change. shouldn't it change signalling that something is clickable if i scroll over the image regions? any help appreciated. Here's a simple folder layout of my website: Website Folder contains: website.htm and images folder, which contains an image I want to be able to write the destination of my image based on where the website folder is located. In Visual Studio, it works when I type "/images/image.jpg", but when I open the project up directly in IE it doesn't find my images. I've looked around and tried "../images/image.jpg" and a few others with no luck other than changing the location to C:/folder/another/folder/websitefolder/images/image.jpg. My other webpage links work with the plain "webpage.htm", so I'm not sure why my images won't load without the entire location. Hello all, I'm making a website and I'm trying to figure out how http://blizzforums.com/ put an image at the top of there page but made it unselectable like a background, same for the news dividers, there unselectable also. Thanks, Zaroth For those who may not know, I am trying to teach myself HTML. I have an understanding about some of the basics and now I want to expand on that. I have a navigation map pretty much set up and appears to be working so far. The problem is that when I upload it and view it in IE, the image that I am using has a blue outline around it. To me this indicates a link and it is throwing the whole look of this page off. The code I have so far is as follows: <td width="228" height="811"</td> <img src="../junk/images/a2.jpg" usemap="#navmap"/> <map id="navmap" name="navmap"> <area shape="rect" coords="2,0,243,29" href="index.htm"/> <area shape="rect" coords="1,37,243,68" href="about.htm"/> <area shape ="rect" coords="0,75,243,105" href="outsource.htm"/> <area shape="rect" coords="0,114,243,143" href="bookkeeping.htm"/> <area shape="rect" coords="0,190,243,220" href="computer.htm"/> <area shape="rect" coords="0,229,243,257" href="peachtree.htm"/> <area shape="rect" coords="0,266,243,294" href="web.htm"/> <area shape="rect" coords="0,304,243,332" href="business.htm"/> <area shape="rect" coords="1,341,243,372" a href="contact.htm"/> </map> </td> I would really like to be able to do away with the blue outline around the image so that everything flls back into place. I would appreciate it if someone could take a look at my code and suggest any corrections I need to make to fix this. Thanks for your time, Vance Im a extreme newbie to html. So be kind. Here is what I want to do. I have a table with 6 icons in 6 cells in column 1. In column 2 I have merged all 6 cells to form 1 cell. I want the user to be able to change the text in the column 2 merged cells depending on which icon they roll over in column 1. Where do I start?? Thanks, Frank M Comments on this post tr84 agrees: Hi All, I have a background image centered in the middle of my screen. The problem I have is that when I view the page on 800x600 or 1024x768 the background image bottom appears to be chopped off. The only way that I can get to see the bottom of my image is by forcing my content to the very bottom of the page. I have the following set in my CSS Code: body
{
background-image:url('image.gif');
background-color: #03174b;
background-repeat: no-repeat;
overflow:hidden;
background-position: center;
{
and like this for my CSS Code: #h1
{
color:#effc1d;
position:absolute;
left:260px;
top:120px;
font-family:Helvetica;
font-size:17px;
}
I am a bit of a newbie to your exacting help would be greatfully received! Hi Guys Is it possible to display an image at different sizes depending on monitor resolution? For example If 1024 x 768 displayed i could have a certain width and height and if 1920 x 1080 displayed it would have a different width and height. Its more to make sure that text on my image does not stretch out and to make sure looks constant on different resolutions. Is there some coding i could do to make sure this happens? Thanks J Hello, noob here! I was just wondering how to code a textbox with an image. there'll be an image left aligned, with text to the right of it with an overlay around the whole thing. I know it sounds a little confusing so I made this image to help illustrate what I would like. (Edited with image editing programs, not HTML code that's what I would like!) It'll be something sort of like this: http://www.htmlforums.com/attachment...1&d=1332654184 For the life of me I cannot keep the tree picture centered under my banner on my guild website. Does anyone know how to "hard lock" the picture to always stay centered as the webpage is sized? Here is the link to the site, go to "Members" and size the page you will see what I mean! http://www.guildvanaheim.com Thank you very much! -Taipans Hi everyone. I'm new at this, so I apologize if this is a simple or redundant question. I'm trying to create a website where the front page is comprised of 5 rollover image links that, when properly aligned (in this case to the right), form one cohesive image. I have tried to individually align each with align="right" but instead of a column of images aligned to the right and directly on top of each other with no spaces, they are instead being organized like text. In other words, the first image is to the right, than the next two span across the page because there is enough room, then the following two do the same. The result is a scattered and disjointed image. I hope that makes sense. How can I get them to stack to the right with no spaces in between? thanks for any help. Wicked simple question: I have three images located in my "images folder" My Top level looks like this -images- (folder) -party- (folder) index.html In my "party" folder I have a page called "events.html" and I need to know how to call an image in my "events.html" located on the top level folder "image" I know if i move the event.htmls to the top level I could call it by this: <img src="/images/picture1.gif"> However I DONT want to move the events.html, so how do I call the image? O and I am not looking for the answer : put the "http://www.sitename.com/images/" in the image tag ANY HELP THANKS!!!!! Hello all, I am a beginner and I am trying to create images horizontally that are also links. Hope that makes sense. This is the code that I can get to work but the links stack vertically instead of horizontally. Thanks in advance for all the help! <a href="http://www.speedfactoryracing.net/store"> <img src= "http://www.speedfactoryracing.net/store/images/cart.png" border="0"> <a href="http://www.speedfactoryracing.net/?cat=4"> <img src= "http://www.speedfactoryracing.net/store/images/news.png" border="0"> <a href="http://www.speedfactoryracing.net/?page_id=236"> <img src= "http://www.speedfactoryracing.net/store/images/AIM2.png" border="0"> http://ps2cho.net/ At the top where it has ps2cho.net I would love to have an image span across. I don't know much about html...where would I start with this? Is it possible with the wordpress theme? Can someone please help me? How do I move the entire image up on following index page: www.AndyG.com Note that there is a one inch gap between top of computer screen and top of image...I just want to move image way up to top... Thanks a lot! Andy I've seen (and cannot find again) a header piece of artwork that was justified a percentage distance from the left of the page. Another plain slither of header artwork was repeated seamlessly across the total width of the page. It went 'behind' the prime piece of artwork and reappeared. The 'joins' were invisible. The header seemed / appeared to be one piece of artwork that went across the page regardless of how wide the page was with the piece of artwork always remaining between the centre of the page and the left hand edge of the page. The distance of the piece of artwork got nearer to the left hand edge of the page the narrower the page got. How does one achieve that? Both images were hosted by ImageShack. I barely understand all that myself! My knowledgebase is a little above zero. Thanks in advance, MD. |
|||||||