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>
Related
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 :)
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/
I have 10 country flags on my company's website (VS 2010/vb/asp.net4.0). Clicking a flag will display the website in that country's language for their entire session.
I would like to, when the client hovers over the flag, have a mini-picture of that country hover above and to the right of the flag. So when they click on the German flag, a mini-map of Germany appears to the upper right -- and I'll z-index it so it goes above the table row above it -- and in addition to the image, it'll say something like, "Deutch" or "View this website in German" (in German, of course).
**Images of countries here when hovering**
Flag1 Flag2 Flag3 Flag4 Flag5 Flag6 Flag7 Flag8
For someone like me who's not great at CSS, is this possible, and if so, how would I go about doing it? Any guidance would be greatly appreciated!
suppose you are using a list
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}
you can add extra css to do the positioning in the .map bit!
This is pretty simple to do with just CSS, Javascript isn't required at all. There are lots of details, but the basic pattern is to put your images inside the same element as the flag. Let's call it .flag. Set the country images to display:none;. Then, set the .flag:hover img to display:block;. That will make the image appear only when hovering on the flag.
You'll have to set the position of the flag element to relative, and the position of the country image to absolute. That will allow you to set the top and right positions of the image to where you want.
I would recommend using jquery as that will allow you to get the display of the image/text when you hover. CSS will be used to position and format image or text.
Here is a good reference to start with.
http://api.jquery.com/mouseover/
You can do it in CSS but if you need animations you need JS. Here is the code for the one without the anims.
HTML
</ul>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
.
.
.
</ul>
CSS
.item {
position:relative; /*Needed for pos:absolute below*/
}
.pic {
display:none;
}
.item:hover pic {
display:block;
position:absolute;
top:-20px;
}
I've created a fiddle for you - http://jsfiddle.net/UHZzJ/
You can substitute the list with <div>'s as well or as your structure requries. The line which says 'View this website in German' needs to be in a sub-div adjacent to the link and be absolutely positioned to the parent <div>.
Forgot to add, a li:hover will not work in IE6. Only a:hover is allowed for. In that case you'll have to put the div within the <a> (setting the display:block). If you're open to JQuery, there are more elegant solutions - http://flowplayer.org/tools/tooltip/index.html, http://craigsworks.com/projects/qtip/
Considering this sample code:
<div style="width:300px;">
<a href="#">
<img src="images/bracket_open.png"/>
<img src="images/1.png"/>
<img src="images/bracket_close.png"/>
</a>
<a href="#">
<img src="images/bracket_open.png"/>
<img src="images/2.png"/>
<img src="images/bracket_close.png"/>
</a>
<a href="#">
<img src="images/bracket_open.png"/>
<img src="images/3.png"/>
<img src="images/bracket_close.png"/>
</a>
</div>
Basically a long list of anchor tags that contain multiple image tags (because of the font) that make up something like [1] [2] [3] and so on.
How can I make it so that the line breaks only occur between the anchor tags and never between the image tags inside of the anchor tags.
I would preffer a XHTML/CSS solution rather than JavaScript if such exists.
Thank you.
Simple nowrap doesn't work?
div a {
white-space:nowrap;
}
With HTML like
<span>[</span><span>1</span><span>]</span><span>[</span><span>2</span><span>]</span><span>[</span><span>1</span><span>]</span>...
You also can use:
div a {
float:left;
white-space:nowrap;
}
But it's not rather elegant due to making inline elements float with no weighty reason.
Which method is best?
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<h1>slogan of company</h1>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<p>slogan of company</p>
</div>
<div id="header">
<a id="logo" href="#"><img width="172" height="80" src="logo.jpg" alt="Clevex logo"></a>
<span>slogan of company</span>
</div>
<div id="header">
<div id="logo">
<img width="172" height="80" src="logo.jpg" alt="Clevex logo">
slogan of company
</div>
</div>
I would think a better approach would be to have the slogan as a span. The slogan is not truly the first header of your document. Think if it were a table of contents would you see the slogan as the first entry?
The slogan is probably subject to some design rules (e.g. the position relative to the logo). As the slogan probably makes little sense in a content / SEO way anyway, and it's more important it looks right, I would recommend putting the slogan into the image.
Looks good, apart from the fact that a slogan isn't really a heading, hence a <span> or something without semantic meaning should be used instead of <h1>
I guess not;
It's better to do it like this:
<h1 onclick="document.location='/';"><span>CompanyName</span></h1>
<h2>Slogan here</h2>
Since your logo is part of the layout and not a image in context (for example a product picture) you should put it in the h1 background.
Do your CSS like this:
h1 {
background-image: url(logo.png);
width: 200px;
height: 80px;
cursor: pointer;
}
h1 span {
display: none;
}
This way it is both readable for the and user and a search engine.
No, something like the following would be better:
<div id="header">
<h1>Company</h1>
<h2>Slogan</h2>
</div>
h1 { text-indent: -90000px; background: transparent url(/img/logo.png) no-repeat left top; width: 172px; height: 80px; }
h1 a { display: block; width: 172px; height: 80px; }
The h1 is only used once, for the company itself. Then you replace that logo text with an image using CSS. This way you keep the markup within your CSS.
In general, I think you'll see everyone's slogan as an image rather than text (with the text as the alt attribute). And href="#" means "go to the top of this page." It should probably be a link to the home page instead.
...As long as you use alt, search engines will index it properly. If this is the home page, that might justify having the name and slogan in h1 and h2 elements, but elsewhere it's probably not necessary. It's probably better to drive traffic based on the actual content of the page and not try to make every page the same in the eyes of search engine spiders. The company name is probably already in the url, which is plenty.