HTML - Possible To Link To A Specific Area Of An Image..?
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 Similar TutorialsHello, 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, I have created a web page in ASP.Net, but completely using HTML codes. This web page shows first 25 hit movies in year wise. I have 2006, 2007 and 2008 year's details in 3 different tables (HTML Tables). All of them are in one page When user clicks main page, it shows all the three year details in tables. User has to scroll down the apge to see full details. Here, I want to give 3 page sections (or page breaks).. If user clicks main page urs, it should show all and user have to scroll down...if user press 2006, it shoud take him to that specific area. If similarly if user clicks 2007, it should take him/her to 2007 details area.. How to do this? I heard that with 'submenubullet', we can do this...Please help me on this is there a way to link to a location on a page like in the example below but instead of the link existing on the same page as the target location, the link exist on one page and points to a bookmark on another page? So for example, I want index.html to have a link that takes the user to chapter 4 of content.html (which is half way down the page) Code: <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> Hi, I would like to know how I can change the gover colour of a specific link by coding the anchor tag of the link? Here's my site: Click What I want to do is change the hover colour for the Home tag. Thanks, DarkArcher I don't have the ability to add an anchor to the page, it's not mine, but I'd like to link to a specific area on the page. Is that possible without that page having some sort of anchor already on it? Ok well I have an iframe on my site, I don't want to have to make several base pages to load different iframe pages from the address bar. So I would like to do something like, "sitename.net/index.html?specifictexthere" ( or whatever after the .html ) to be able to go to a different link with the iframe on that page. But also if its not one of the right specific texts then, it will just go to the normal iframe link thats set. Ladies and gentlemen, I'm just a beginner to HTML. I'm trying to develop my own web page but there is still lots of things under construction. Now just the home page and some of hyperlinks are finished and available. Most of other hyperlinks are unavailable and under construction, that's why when I click over these unavail. hyperlink, the browser always tell me "the page can not be displayed"... My idea is that I would like to know how to displayed a specific page which has the message "Sorry, this page is currently under construction". So everytime I cick over any link that is unavailable, it will show me this particular page with the message on... Does anynbody know how to do this, could you please advise me how to write code to get this done. Please help me, your help is highly appreciated... Many thanks & best regards, Hao. 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 <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 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 the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 5; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg' Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg' Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg' Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? im kind of new to design and some of my image links have a small blue box around them and i dont know what it is. Im using dreamweaver to build my site. it is www.devilthreads.com if you want to check it out But how do i get rid of that damn blue box around the image link Say I have an image that is 400px tall, and 200 px wide. What do I have to do so that if the user clicks the top half of the image, it takes him to a certain link, and it takes him to a different link if he clicks the lower half? I think this is possiboe, and I do not want to use 2 images... Thanks! I appreciate all your help! I've got a photo gallery set up for my site, each gallery pops up in a new window. Within each gallery there are various thumbnails. Is there anyway I can link the thumbnails to open in a specified area of the window? (while still showing the other thumbnails) This is what I do have: <img src="images/Thumb/dress/dress3.jpg"> <img src="images/Thumb/dress/dress4.jpg"> <img src="images/Thumb/dress/dress5.jpg"> <img src="images/Thumb/dress/dress6.jpg"> --I haven't added the link html yet because I'm not sure if it will be different from the norm..please help Hi Guys, I have an image with link tags around it but it doesnt work in IE6. See code: <a href="http://www.site.com"><img src="images/support_button.png" class="supportbutton"/></a> .supportbutton { float : right; margin-top : -0.4em; padding : 0; border : none; } I'm not sure if this belongs in HTML, CSS, or somewhere else entirely, but I thought I'd start here... I'm creating a photography website in which the background is black. Right now, the site is very basic...pretty much entirely done in HTML and a little CSS. I have a set of thumbnails that link to a full size image. I know that I could have the thumbnail link to another html page entirely, and have that page display my photo as well as background colors, but I was wondering if there was a way to link directly to the photo, yet have a black background when the browser opens the photo. Ok, what is the code to put in to get this done? I have image at: images/tables/image.jpg and i need to show it at work/portfolio/index.html The problem is if i link to images/tables/image.jpg it will now show it cause the path is wrong at work/portfolio/index.html, how do i set path to the image? do i just put ../images/tables/image.jpg or what is the right code? thanks! Hey, im making a portfolio site and i am linking my images except when i link them i get a small blue border around it whihc moves it down a bit and it looks outta place i was wondeirng is there anyway to take this border out or not plz help. heres what it looks like be4 and after. Hi, I'm new here, and even new to coding websites. Well, it's going pretty well this far I think, but I have one problem now. I have placed a picture/logo which I have turned into a link. It's working very well and looks great, in Google Chrome! But in IE there's a "border" which is blue, and with mouse over it's red. Like all the other links on my site. But I don't want this "border" to be there, just like in Chrome. I have tried almost everything to remove it, but I can't. And I can't even figure out why it's there. Can somebody help me? Thank you. Best regards Thomas. Hey guys, I want to click a button that is behind an image (set in absolute position). The button that I am trying to click is within an iframe so I cant use any sort of javascript to click it. The click must be real and not faken. Iframe containing button ----> Image over it Is there anyway I can setup the image so I would be able to click thru it (add transparency setting or something like that)? The image must remain visible but I want to be able to click the button that is under it. The goal is to make the visitor click the image but it would actually click the button in the iframe behind it. Thanks alot guys, |