|
HTML - Linking From An Area Of An Image
Hi,
I have some big banner images that have a number of different links on them and i need to have them linking to another page. So far i have been breaking the images up into smaller images and putting them back together with CSS. This has proven to work fine on some of the simplier images but now i have some complex images with about 5-10 links in different places. To continue breaking up the banners these images would need to be broken into more than 30 parts just to have the areas i want clickable. Is there another way to acheive what im after using some kind of frame that i position over the image and get the same effect rather than having to break all the images up? is it image mapping i need to do some learning on or is this completely different? thanks in advance CC_Design Similar TutorialsSo my question is simple and easy. I already have knowledge of how to make a image link you to a web page. but I recently found the need to make a image link you to a webpage but not in a new window (what I mean is not open up a new browser window or tab when the image link is clicked.) how do I do this? Hi all. Great forum. I did a search and couldn't find my answer.. so here goes. Is it possible to link to a specific part of an image? For example I have a large class photo JPG and a page with all the students names on it. What would I need to do so that a parent can click on "John Smith" and it would take them to John's location in the photo..? I was thinking of something like <MAP> would help me out but it's not meant for this particular task. Thanks in advance! -M <MAP NAME=mymap> <AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195"> <AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195"> <AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195"> </MAP> <IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200> I want to show black border arround each area and also show hover effect How can I do this. I tried to add border to style attribute of area tag. but to no result Is it possible to choose an image from a drop down menu which would change an image on the page? for example using mouseover you can make thumbnail images or hyperlinks when hovered over, change an image on the page to the image that the link or thumbnail represents. can the same be done with a drop down list when an image number is chosen from a list can a centre image be linked with the choice chosen? Hello, I have an image which has a white area somewhere on the right side, but not exactly on right. I want to put addthis.com share buttons on this white area (please see attachment to see the image I'm talking about). When I use div align="right" I get them to be on far right which is not what I want. How can I achieve this using HTML? If not addthis.com code, is there any way of putting simple text or links on this white portion? I donot want to use css to do this as I'm on joomla and using css for this little work conflicts with the main css of the joomla template. Please help me. This thing has been driving me crazy for days!!! Thanks, Right now I have a very simple Javascript image array Quote: <script language="JavaScript"<!-- ImageNames = new Object(); ImageNames.length = 56; for (counter = 0; counter < 57; counter++) { file_number = counter + 1; file_name = ("image" + file_number + ".jpg"); ImageNames[counter] = file_name; } //--></script> <script language="JavaScript"> <!-- which_image_loaded = 0; function changeImage(direction) { which_image_loaded += direction; if (which_image_loaded < 0) which_image_loaded = 56; if (which_image_loaded > 56) which_image_loaded = 0; if (document.images) document.myimage.src = ImageNames[which_image_loaded]; } function MM_callJS(jsStr) { //v2.0 return eval(jsStr) } //--> </script> along with an image on the page and buttons that control the script Quote: <a href="javascript:changeImage(-1)"> along with <img src="image1.jpg"> This is for a web gallery of photographs, basically a picture in the center with a Back and Forward button to cycle through them. I also have an actual thumbnail gallery though, as I want people to be able to load the images they want without having to manually cycle through all of them. How then would I link to a specific image in this javascript array from a separate Web Gallery page? I hope this is the right place to ask this, any help would be appreciated hello i am wondering if it's possible to load content into a div by clicking a link in div 1 and changing what is shown in div 2 and clicking a link in div 3 would change what is shown in div 4 i have attached a generic png of how i would want the page to look....and to give a better idea of what i am wanting...any idea's as to how to do this would be appreciated...but be prepared depending on your suggestion i may need some help with how to get it accomplished. Below are two notepad docs. I want to add a link from one to the other. Whenever I add the <a href="..... "></a> nothing shows up when I view the webpage. What am I doing wrong? Thanks. FIRST DOC <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Departments</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.6000.16544" name=GENERATOR></HEAD> <BODY style="text-align:center; font-family:verdana,helvetica,san-serif ;background-color:#c0c0c0"><!-- 2D departments Lastname Firstname --> <H1>Business and Information Technology</H1> <H1>Health</H1> <H1>Law Enforcement</H1> <H1>Communications and English</H1> <H1>Math and Science</H1></BODY></HTML> SECOND DOC <!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" xml:lang="en" lang="en"> <head> <title>Culinary Arts Recipe</title> </head> <body> <!-- 1G Recipes Lastname Firstname --> Hawaiian Chicken <hr size="2" width="100%" /> This dish can be seved quickly and easily. Boil and debone chicken. Add 1 can of your favorite cream of chicken soup to the chicken. Make 2 cups of cooked rice. Prepare plates immediately before serving. Lay chow mein noodles, rice, chicken, crushed pineapple, green onions, shredded cheese, sour cream, tomatoes, and coconut. </body> </html> hi again, i think that i know the answer to this question...but i needed reassuring. basically my website's hierarchy is pretty confusing but it seems to link fine on my computer and everything, then it didn't link on the school computers but i solved that problem because all that was wrong was the file pathways were different. Now however when my teacher tries to open my files, all she gets is that file that cant be found stuff. Do you think maybe the problem could be that my files are too complicated and that maybe i should put all my pages in one place and then all my other files in folders underneath those... please tell me your advice, with many thx Sam Hello, I have a site with a big picture that use <area> and <map> tags. How can I replace piece of the big picture, by other image using OnMouseOver or by other way? (The image is defined by coords) Thank You! Big Image, and the image that I need to replace. I have made a layout for guild in an online game i play im new to html because im 14 so im not very good. The text at the top i want as one blog area but i want a second blog area underneath thats under a spaer here is the code i used for the first blog area <div style="position:absolute;left:450;top:330;width:375;height:304;overflow:auto"> But when i use the same code to make a second area but change the pixels to place it elsewere it just keeps messing up please could someone help me with this i need it soon Hi, how would i got about setting up a place where people can leave comments on my website? My apologies if this is in the wrong area, i have searched forum and could not find what i'm needing/doing wrong. I have a website that was in cold fusion, i am changing it to html/css. So i sliced it up and everything is good except the area i need to be dynamic for wordpress. Only half is stretching. The part where i want widgets to go is not stretching with rest. Sorry if my code is a mess, i'm just learning. Thanks for any advise or directions. 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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body background="images/bg.jpg">
<body>
<div id="wrapper">
<div id="header">
<div id="topleft"><!--start of content keep left -->
</div>
<div id="home">
</div>
<div id="about">
</div>
<div id="process">
</div>
<div id="yachts">
</div>
<div id="blog">
</div>
<div id="news">
</div>
<div id="contact">
</div>
<div id="headbanner">
</div>
</div><!--header -->
<div id="contentwrap">
<div id="leftcontentwrap">
<div id="static">
</div>
<div id="dynamic">
</div>
</div><!--leftconentwrap -->
<div id="rightcontentwrap">
<div id="sidebarwrap">
<div id="sidebar">
</div><!--end sidebar -->
<div id="sidedynamic">
</div>
</div><!--sidebarwrap -->
</div>
</div><!--contentwrap -->
<div id="footwrap">
<div id="footer">
</div><!--footer -->
</div><!--footer wrap -->
</div> <!--wrapper -->
</body>
</html>
CSS Code: @charset "utf-8";
/* CSS Document */
#header {
height: 280px;
width: 891px;
}
#headbanner {
background-image: url(images/island_12.png);
height: 203px;
width: 891px;
float: left;
}
#home {
background-image: url(images/island_04.png);
height: 77px;
width: 63px;
float: left;
}
#sidebarwrap {
float: left;
height: 348px;
width: 200px;
}
#dynamic {
background-image: url(images/island_15.png);
width: 659px;
min-height: 427px;
}
#contact {
background-image: url(images/island_10.png);
float: left;
height: 77px;
width: 140px;
}
#news {
background-image: url(images/island_09.png);
float: left;
height: 77px;
width: 55px;
}
#footer {
background-image: url(images/island_16.png);
height: 75px;
width: 891px;
float: left;
}
#sidedynamic {
background-image: url(images/sidedynamic.jpg);
float: left;
height: 77px;
width: 232px;
min-height: 77px;
}
#rightcontentwrap {
height: auto;
width: auto;
float: left;
}
#contentwrap {
width: 891px;
min-height: 348px;
}
#sidebar {
background-image: url(images/island_14.png);
height: 348px;
width: 232px;
}
#static {
background-image: url(images/island_13.png);
float: left;
height: 152px;
width: 659px;
}
#process {
background-image: url(images/island_06.png);
float: left;
height: 77px;
width: 93px;
}
#about {
background-image: url(images/island_05.png);
height: 77px;
width: 67px;
float: left;
}
#blog {
background-image: url(images/island_08.png);
float: left;
height: 77px;
width: 61px;
}
#leftcontentwrap {
width: 659px;
min-height: 348px;
float: left;
}
#topleft {
background-image: url(images/island_03.png);
height: 77px;
width: 347px;
float: left;
}
#yachts {
background-image: url(images/island_07.png);
float: left;
height: 77px;
width: 65px;
}
#wrapper {
width: 891px;
min-height: 800px;
margin-right: auto;
margin-left: auto;
padding-top: 25px;
padding-bottom: 0px;
padding-left: 15px;
padding-right: 0px;
}
Is it possible to use img map and area over an swf file the same way that you can use it on a jpeg? I want to make just specific coordinates on the video to go to specific links. I did it for a jpeg but I can't get it to work on my swf file. could any hero (who must be very advanced) send me example code if you could get it to work -Mark :wacko: :wacko: :excl: marksmolen@mail.com Ok im pulling my hair out, im trying to make a small text area scrollbox. How od I change the font face, color and background color? Thank you, this is what I have so far please help. Quote: <html> <head> <title>Page title</title> </head> <body> <textarea rows="3" cols="10"> </textarea> </body> </html> So the issue in question is located at Deejay Octane I am wanting the links DIV to float to the right that much is happening, however the content DIV is not stretching to contain it. Any suggestions? Thanks Is it possible to define coordinates for the area in percentages of the image instead of pixels? For the map I want to use an image that resizes depending on the viewport resolution. Then pixel coordinates obviously don't work. I am looking to have an area beside my nav bar that is titled "Whats New". This would be a small square beside the nav bar with a few links under it that would link to new additions of the site or current events. I want this section to be included on all 9 pages of my website, but when I change these items I dont want to have to change the links and text on all 9 pages. How can I make it so I alter just one page and it will change on all 9 to save me time? Could I use CSS to do this? If so how? Also I thought of using an iFrame. Not sure if that would work either. Please let me know of a way to do this Thanks, PizzaStick Hi, I don't know if this is the best board to post on so if not please move. I'm looking to offer a members area on my new website im developing at the moment. The main goal is for my customers to have a username and password which they can then log into the personal member area. I don't think i want anything too complicated but this is my ideas so far of what i would want: Inovices: I want to make invoices available as PDF's for the customers, at the moment i don't mind if this has to be a manual upload but some way of manageing it would be nice. Monthly reports: My customers receive monthly reports on teh support they used during that month, i would like to make this available on the website, again i don't mind if i have to manually upload the files but some way to manage it. Subscriptions: I want my members to be able to activate additional services which will have recurring monthly payments. Either using paypal or another trusted payment gateway. The member will need to have a list of teh additional services i offer and then the ability to either subcribe to an additional service or unsubscribe aswell from within there member area. Tutorials: All of my members require tutorials to be created for them every now adn again. At the moment i would send this by email and after a month or 2 the custoemr deletes the email to find they need the tutorial again. I would like to store tutorials in there member areas so they have access to them all teh time. Is there any software out there i can take a look at to manage something like what i'm after? If there are any Open source ones available i would prefer that as i find open source not only to be free but also easier to edit and build on in the future. Any suggestions or ideas to where i can find something to handle this would be really appreciated. If one doesnt exist then anyone interested in doing some programming for me? Send me a PM and we can discuss my requirements in more detail and also discuss price. CC_DESIGN First off, I would classify myself as having a basic working knowledge of HTML, but I'm far from experienced. I use Expressions (I know, first mistake), and do at least 50% of the work in the code view window. I'm having a problem right now linking a PPS document. I made the PPT and saved it as a PPS, and linked it using <a href="images/anamaited.pps" target="_blank"> When I preview the website on my computer and click the link the document opens in a new explorer window as a PPS, but when I publish the site and click the link it downloads the document and opens PPT. I don't want visitors opening my presentation in PPT, is there anyway to have the pps display in a browser window or do I have to convert the PPS into flash? If I need to display it as a different file type, I need to do it for free, any suggestions? -edit- wanted to clairfy when I click the link on the live site, it actually opens MS PowerPoint, not a new browser window as the tag specifies. |
|||||||