I have a banner on web page, and part of the image there is a graphic of a button box. How do I make just the part where the button is a clickable link such as a href? You can see a sample image below.
In the banner image there is a "Join Now, Its Free" Button graphic. I want to add a link on this box, so when users click on this box on the banner, then it will open the next page. I want to know how I can add a link on just this button. I don't want to add the <button> tag to it; I just want to add a link based on the area of the "Join Now, Its Free" Button graphic. Anybody have any ideas on how I can add a link on this part of the image area without using the <button> tag.
<div class="flexslider">
<ul class="slides" runat="server" id="Ul">
<li class="flex-active-slide" style="background: url("images/slider-bg-1.jpg") no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
<div class="container">
<div class="sixteen columns contain"></div>
<img runat="server" id="imgSlide1" style="top: 1px; right:
-19px; opacity: 1;" class="item"
src="images/slider1.png" data-topimage="7%">
</div>
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
<li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul>
</div>
Thank You
If you don't want to make the button a separate image, you can use the <area> tag. This is done by using html similar to this:
<img src="imgsrc" width="imgwidth" height="imgheight" alt="alttext" usemap="#mapname">
<map name="mapname">
<area shape="rect" coords="see note 1" href="link" alt="alttext">
</map>
Note 1: The coords=" " attribute must be formatted in this way: coords="x1,y1,x2,y2" where:
x1=top left X coordinate
y1=top left Y coordinate
x2=bottom right X coordinate
y2=bottom right Y coordinate
Note 2: The usemap="#mapname" attribute must include the #.
EDIT:
I looked at your code and added in the <map> and <area> tags where they should be. I also commented out some parts that were either overlapping the image or seemed there for no use.
<div class="flexslider">
<ul class="slides" runat="server" id="Ul">
<li class="flex-active-slide" style="background: url("images/slider-bg-1.jpg") no-repeat scroll 50% 0px transparent; width: 100%; float: left; margin-right: -100%; position: relative; display: list-item;">
<div class="container">
<div class="sixteen columns contain"></div>
<img runat="server" id="imgSlide1" style="top: 1px; right: -19px; opacity: 1;" class="item" src="./test.png" data-topimage="7%" height="358" width="728" usemap="#imgmap" />
<map name="imgmap">
<area shape="rect" coords="48,341,294,275" href="http://www.example.com/">
</map>
<!---->
</div>
</li>
</ul>
</div>
<!-- <ul class="flex-direction-nav">
<li><a class="flex-prev" href="#"><i class="icon-angle-left"></i></a></li>
<li><a class="flex-next" href="#"><i class="icon-angle-right"></i></a></li>
</ul> -->
Notes:
The coord="48,341,294,275" is in reference to your screenshot you posted.
The src="./test.png" is the location and name of the screenshot you posted on my computer.
The href="http://www.example.com/" is an example link.
You can auto generate Image map from this website for selected area of image. https://www.image-map.net/
Easiest way to execute!
by creating an absolute-positioned link inside relative-positioned div..
You need set the link width & height as button dimensions, and left&top coordinates for the left-top corner of button within the wrapping div.
<div style="position:relative">
<img src="" width="??" height="??" />
</div>
The easiest way is to make the "button image" as a separate image.
Then place it over the main image (using "style="position: absolute;".
Assign the URL link to "button image".
and smile :)
Related
I am trying to use a Instagram icon as a hyperlink so that when you click on it, it goes directly to my Instagram page. I tested it out on Firefox, and when I click on the icon it doesn't go to my Instagram, it just leaves a blank page.
<strong><u>Social Media<u></strong><br>
<a div class="socialmedia" href="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px;height:30px; padding-top: 7px;">
</a></p>
I have a on it so that I can do a line height code on the icon so it's not too close to the "Social Media" text.
You're trying to mix an a with a div.
Try this:
<div class="socialmedia">
<a href="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px;height:30px; padding-top: 7px;">
</a>
</div>
There are a few problems here. As others have noted, you've got a and div mixed in together. Your tags, without all the classes and attributes, can basically just be
<a><img></a>
The reason it's not linking to anything is the href - you need to set that to the url of your page. So if your instagram page is instagram.com/SomeUserName, you'd do this:
<a href="http://instagram.com/SomeUserName" class="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px; height:30px; padding-top: 7px;">
</a>
All you need to do is wrap the img tag with an anchor tag. :)
<a href="javascript:void(0);"><img
src="img.jpg" alt="image"/></a>
You got to remove that div from inside your element. a link is like this.
<strong><u>Social Media<u></strong><br>
<div div class="socialmedia">
<a href="socialmedia">
<img src="images/instagramlogo.png" alt="Instagram"
style="width:30px; height:30px; padding-top:7px;">
</a>
</div>
I have a list, like this:
<ul id="categoryTabsId" class="categoryTabs">
<li onclick="tabs(this);" class="selected" id="tab1">
<span class="tab-one">
<img src="http://www.dot.ca.gov/hq/jobs/images/number1_icon.jpg" />
</span>
some text
</li>
</ul>
The CSS which manipulates the image position is:
position: relative;
top: 0;
left: -20px;
The CSS moves the image to the right position, but the image is not displayed completely, it seems a part of the image is behind something else. I tried using z-index: 999999999 but this wont change a thing. Why is the image not on top of everything with such a high z-index?
Thanks!
I have an image of a logo which has a slogan underneath it. I want the logo as a hyperlink for the home page but I want it to be only clickable from the actual logo and not the slogan underneath it. But I cant manage to achieve this because the logo and slogan are part as one image.
Is there anyway around this other than having 2 separate images?
HTML:
<a href="http://www.dalewoods.com" id="logo_link">
<img src="images/logo.png" alt="Dale Woods" class="logo"/></a>
CSS:
img.logo {
margin-top: 20px;
}
You could use <map> and <area> to create an image map on the image. The area can then be used to link only parts of the image.
Here is a simple example that you could modify to fit your needs:
<map name="a">
<area shape="rect" coords="25,25,75,75" href="http://www.dalewoods.com">
</map>
<img src="images/logo.png" alt="Dale Woods" class="logo" usemap="#a" />
In this example, only the part of the logo covered by the rectangle area will be linked.
Yes, there is. :)
<div id="logo">
Dale Woods
</div>
And CSS:
#logo {
width:200px;height:200px;position:relative;
background:url(images/logo.png) no-repeat;overflow:hidden;
}
#logo_link {
display:block;position:absolute;top:0;left:0;
width:200px;height:150px;text-indent:-2000px;
}
The positions and dimensions have to be changed, but structurally this should solve your problem.
Here is an example: http://codepen.io/anon/pen/KEdrc
HTML:
<div class="logo">
<img src="image.png" alt="Logo">
</div>
CSS:
.logo {
display: inline-block;
position: relative;
}
a {
position: absolute;
left: 0; top: 0;
height: 50%; width: 100%;
}
img { display: block; }
I tried to explain here on how to do this.. Check the fiddle and you could get an idea of how to do that...
Example
<img src="example.gif" width="145" height="126" alt="Example" usemap="#Example">
<map name="Example">
<area shape="rect" coords="0,0,82,126" alt="Firsthalf" href="#">
</map>
Here think that the image and the first half is clickable and the second is not clickable. Try to do that as the same or provide your image in the fiddle..
Having a 286x176 pixels image, this is how I achieved it so that the left half is a link to Android and the right half links to Apple:
<map name="logos">
<area shape="rect" coords="0,0,143,176" href="http://www.android.com" title="Link to Android" alt="Link to Android">
<area shape="rect" coords="143,0,286,176" href="http://www.ios.com" title="Link to Apple" alt="Link to Apple">
</map>
<img src="myimage.png" usemap="#logos">
So I have a tab menu,
SO i.e.
And once clicking on the tabs the content for that tab display with a white background matching the tab. The problem in IE7 is that the content for the tab does get displayed but the content goes outside my tab div and into the background. This only happens in IE7.
The content mark up is as follows
<div class="tabContentRow">
<div class="tabContentImageLeft" style="DISPLAY: inline">
<a href="" target="_blank">
<img width="110" height="110" alt="Video" src="~/?w=110&h=110&as=1" /> </a>
</div>
<div class="tabContentCopyRight" style="DISPLAY: inline">
<h2>video</h2>
<p>Text here.</p>
</div>
</div>
And the problem has to do with my two divs
<div class="tabContentImageLeft" style="DISPLAY: inline">
<div class="tabContentCopyRight" style="DISPLAY: inline">
If I dont put the content within these two divs then even IE7 it stays nicely within my tab div. But if I put it the tab div doesnt drop down and it just blends into the background.
.tabContentImageLeft {float: left; width: 130px; text-align: center;}
.tabContentCopyRight {float: left; width: 575px;}
Add a clear div at the bottom of your tabContentRow. Your elements are floating and therefor taken out of the DOM flow.
<div class="tabContentRow">
.....Inner tab markup
<div class="clear-fix" style="clear:both;display:block;"></div>
</div>
I have a hover solution setup with CSS. However, the hover images don't respect the viewport and therefore end up displaying outside of it. I planned to simply create new classes specifying the offset depending on the location of the image within my design, but since I can't control the resolution the user is using, I was thinking there should be some way to force the hover to display within the viewport. Does anyone have an idea on how I can do this?
I have the following CSS:
.thumbnail:hover {
background-color: transparent;
z-index: 50;
}
.thumbnail span {
position: absolute;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img {
border-width: 0;
padding: 2px;
}
.thumbnail:hover span {
visibility: visible;
top: 0;
left: 70px;
}
To match the following thumbnails with hover:
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg" />
<span><img src="1_b.jpg" /></span>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg" />
<span><img src="2_b.jpg" /></span>
</a>
</li>
I have a sample page here displaying the behavior:
http://estorkdelivery.com/example/example2.html
Hover over the images at the bottom to see the hover image display outside of the viewport.
Thanks!
Update 2/22/2012 I tested answer #1 below, but it introduced new issues such as the need to change the transparency and the need to have the hover image always display from the top left of the image - both issues I saw no way of modifying with the script options. Anyone have other suggestions or a way to modify the script in answer #1? Also, I should add what I'm looking for as more of the final result is the hover styling of images on istockphoto.com where the images always appear in the same spot to the left or right of the images they are hovering over and not based off the position of the mouse as you hover over the image.
I've created a bespoke plugin for you!
http://jsfiddle.net/adaz/tAECz/
Well, it's pretty basic but I think it meets your criteria. You can activate it in two ways:
1) If you can't be bothered creating thumbnails for every image, you can just simply list your images like this:
<ul id="istockWannabe">
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
<li>
<img src="imgURL" width="600" height="400" title="Description" />
</li>
...
</ul>
2) If you really want to create your own thumbnails, your html should look like this:
<ul id="istockWannabe">
<li>
<span rel="largeImgURL"><img src="thumbURL" /><span class="iStockWannabe_description">Image description</span></span>
</li>
...
</ul>
Either way you choose, you need to include jQuery 1.7+ in your page along with my plugin.
The very last thing you need to do is to activate it, if you're going for the first option, you can just include in your page following code:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe();
});
</script>
If you're going for the second option, you need to override default settings like this:
<script type="text/javascript">
$(document).ready(function() {
$("#istockWannabe").istockWannabe({ createThumbs: false });
});
</script>
This is more like a prototype so it's quite limited in terms of functionaltiy but you can set some options like:
thumbMaxWidth: 100
thumbMaxHeight: 100
tooltipWidth: 200
tooltipHeight: 150
transitionSpeed: 100
If you like it, I'm happy to spend some time on it and adjust it to suit your needs!
Try the jQuery Tooltip:
Here is an example according to your request:
http://jsfiddle.net/cadence96/3X2eZ/
DOCS
http://docs.jquery.com/Plugins/Tooltip
http://jquery.bassistance.de/tooltip/demo/
Quick instructions:
1) Within the <head> load the css and scripts:
<link href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
2) Still within the <head> place the execution script:
<script type="text/javascript">
$(document).ready(function() {
$(".your-div").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 250,
bodyHandler: function() {
return $($(this).next().html());
},
showURL: false
});
});
</script>
The class '.my-div' will be used to display the image with the hover event.
The sibling div to '.my-div' must contain the hidden elements to make visible after hovering.
<ul>
<li>
<div class="my-div">
<!-- Here comes the image with the hover event -->
</div>
<div class="active-hover">
<!-- Here comes all the hidden elements I want to display while hovering the PREVIOUS div --><br />
<!-- .active-hover must be set with display:none -->
</div>
</li>
</ul>
That's all!
I've developed a script, in the js you can change the width of the container.
Here is the fiddle:
http://jsfiddle.net/cadence96/GgDqh/
UPDATED, NOW WORKS IN FIDDLE AND IS MORE ADAPTABLE.
UPDATED:
demo : http://so.lucafilosofi.com/make-css-hover-stay-within-viewport
look at the source code
NB: this does not take in consideration cases in which the popup is bigger then the window, in this case you should not only change the offset position but you have to resize the popup to fit the window.
This works. I however solved the problem only for the Y-axis. For the horizontal offset it should be the same. See how it works here.
I set the top to exactly the side of the image * -1, this aligns the image at the bottom if it doesn't fit, change that value to whatever you want. The images are very big and this script is however not gonna be bulletproof. You would have to get the whole visible area to make sure it doesn't cut out on the other side when you re-position it.
The markup hasn't changed, I just added the Jquery:
$(document).ready(function(){
$(".thumbnail > img").mouseenter(function(){
var winSize = $(window).height();
var winScrollTop = $(window).scrollTop();
var linkOffset = $(this).offset().top - winScrollTop + 75;
// 75px is the height of the img. To get the offset().bottom . Get rid of the scroll too.
var imgHover = $(this).next("span");
var imgHoverHeight = parseInt(imgHover.children("img").attr("height"));
var spaceDif = winSize-linkOffset;
if(spaceDif < imgHoverHeight){
imgHover.css("top", -imgHoverHeight+"px");
//it doesn't have to be -imgHoverHeight. Tweak this value to get better results
}
});
$(".thumbnail > img").mouseout(function(){
$("span").css("top", "0");
});
});
Hope it helped!!
Try this one... seems comparatively cool!
<html>
<head>
<title>Hover Test</title>
<style>
li {margin-bottom: 100px;}
.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail div{ /*CSS for enlarged image*/position: absolute;padding: 5px;left: -1000px;border: 1px dashed gray;visibility: hidden;color: black;text-decoration: none;}
.thumbnail div img{ /*CSS for enlarged image*/border-width: 0;padding: 2px;}
.thumbnail:hover div{ /*CSS for enlarged image on hover*/visibility: visible;top: 0;left: 70px; /*position where enlarged image should offset horizontally */}
</style>
</head>
<body>
<li>
<a href="http://www.yahoo.com" class="img thumbnail">
<img src="1_s.jpg">
<div><img src="1_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.google.com" class="img thumbnail">
<img src="2_s.jpg">
<div><img src="2_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.apple.com" class="img thumbnail">
<img src="3_s.jpg">
<div><img src="3_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.babycenter.com" class="img thumbnail">
<img src="4_s.jpg">
<div><img src="4_b.jpg"></div>
</a>
</li>
<li>
<a href="http://www.food.com" class="img thumbnail">
<img src="5_s.jpg">
<div><img src="5_b.jpg"></div>
</a>
</li>
</body>