I am building a website and I'd like to add a link to a facebook page.
Designer has sent me a round image to represent the facebook link. Actually, the image is a rectangle, but the painting is round.
What I want is the pointer to change to the "link hand" only when over the round area of the image.
I could partially achieve that with this:
.imgFacebook {
border-radius:50%;
height:50px;
}
However the result I'm getting is: it is working for the image's top-side. In the top side, when I move the mouse outside the round, pointer gets back to an arrow.
The bottom side is still considering the image as a square image and changing the pointer outside the round design to a "hand", representing a link.
I have tried to set the border radius individually for each corner (top-left/right and bottom left/right), with no success.
So, does anyone knows how can I get a round area in my image as a link?
Thanks in advance
After some searches using different keywords, I was able to find a "how to" in this link.
http://jsfiddle.net/6UYTL/2/
I just had to add the image inside the div. As for the image I have used some style to make it display round as well.
<a href="http://www.wherelionsroam.co.uk" target="_blank">
<div id="a">
<asp:Image ID="imgLinkFacebook" runat="server" CssClass="imgFacebook"/>
</div>
</a>
.imgFacebook {
border-radius:50%;
height:50px;
}
Thanks anyway.
Related
how to install it when you walk across the image change the mouse cursor to be my heart this picture while I was in the picture ?
thank youenter image description here
as i understand, you want when you hover over the image, the default cursor to change to a heart.
so use this , and instead of the stackoverflow favicon.ico use your heart image
img {
cursor:url(http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico), auto;
}
<img src="http://placehold.it/350x150">
How can I make the image inside the button fit better and higher quality?
<BUTTON onClick="ClipBoard(z#emp_ext#);"> <img src="copy-icon.png" style="height:16px;width:16px;"> </BUTTON>
Im using the image https://www.iconfinder.com/icons/174935/copy_icon .
Here is how it looks like with the code above.
I made a http://jsfiddle.net/e58s7jpy/ but don't show image here.
I wish i could post a image but need 10 reputation ;(.
you need to save the image with btter quality by enhancing the pixels in the path which you refer.
Hope this helps. If happy, vote the answer.
button div{
width:16px;
height:16px;
background-image: url(images/ui-icons_d19405_256x240.png);
}
you can also slightly enhance by Background modification and padding.
I'm new to web programming, recently I've been asked to make some home pages for someone.
Unfortunately I've run into some problem, the homepage will be on a touch screen for touch input, I've got reports like buttons most of the time doesn't work when clicked on, one of my suspects is invisible borders caused by PNGs.
TL;DR - http://puu.sh/6HQez.jpg The corner of the red button is being blocked by the invisible border of the purple button, are there any ways to fix that?
EDIT: No I'm not asking for how to remove the dotted line, I made them visible to show you.
It seems like what you are referring to is not an 'invisible border' but an 'invisible background'.
Your PNG files are rectangular shaped when it comes to event handling, even if some parts are transparent.
If you need to disable some elements from being clicked, you can go about it few ways:
Disable pointer-events with CSS to make sure that a specific
element does not caputre clicks.
#mypurplediv {pointer-events: none;}
Use Z-index to decide the hierarchy of your elements:
#mypurplediv {z-index: 0;}
#myrediv {z-index: 1;}
EDIT:
Per your comments, it seems that you need to retain the abiity to click on ALL elements.
As I mentioned above , your current PNGs are actually rectangles with some parts being transparents.
So you have these options:
1) Use SVG which are vector based shapes (that will by default not have invisible backgrounds). Good tutorial here.
2) Use image mapping and area to create your shapes and give them href. This is a good tutorial about image mapping.
example - <area shape="poly" coords="74,0,113,29,98,72,52,72,38,27" href="index.htm">
3) Use 3rd party javascript/jQuery libraries such as ImageMapster.
Hope this helps!
That dotted border is called focus outline. You can turn it off by applying CSS to the image.
img { outline: none; }
I am not a clean CSS coder, so this may be the crux of my problem... but...I've cobbled together an interactive map from this tutorial: http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/.
My solution: http://www.paideiaschool.org/testing/barb_map.htm
I think I have the initial "rollovers" of the map working-- (I've only coded the first two buildings in the upper left of the map) and am happy with that.
My problem is I want the legend of the map to do the same things as the rollovers of the map. I've come up with a clumsy solution that works (labeled '1509'), but not well in all browsers, and that tells me I have gone wrong somewhere.
I'm trying to avoid javascript as well.
What is the main problem?
Here's an updated jsFiddle for part one
Here's the basics:
<div id="city-map">
<div class="pop-up">...</div>
<div class="pop-up">...</div>
...
</div>
We use an image map with anchor tags as "hot spots". We use CSS to absolutely position these "hot spots" in the proper location and we do the basic background image sprite "trick", the same you did in your original code.
However, I updated your sprite image to have two "hover" images. When making an image hover map with none-square image spots (like buildings overlapping each-other), a single hover state runs into problems with a "neighbor" icon showing up in the hot spot slice. This is due to due HTML blocks being square and not being able to draw odd shapes. We solve this by having extra images states so you can make the neighbors still look un-highlighted.
Pop-up box
<div class="pop-up">
<h1 class="title">Mac</h1>
<div class="content">Some Content</div>
</div>
All the pop-up boxes have this HTML format. I position: absolute; them off to the side with the standard left:-999em; trick. I crafted the CSS to give them a standard pop-up location with a slight space between the hot-spot box and the pop-up box. This helps ensure your mouse will "hover out" of the hot-spot when reaching for a new hot-spot. Otherwise, you'll hover over the pop-up box and it won't go away until you over off both.
<div id="city-map-legend">
<div id="glamour-photo">
<img src="..." id="mac-img" />
<img src="..." id="admin-img"/>
...
</div>
<div id="cml-list">
<h2>Around Campus</h2>
<ul>
<li><a id="mac-list" href="#">Mac</a></li>
...
</ul>
</div>
</div>
For the "map legend", I have a group of "glamour images" and a list of links. Pretty standard stuff. The key is how they're all tied together with their ID's. JavaScript will use this to swap images and CSS states as we tie the three elements (map, glamour image, and list of links) together.
ID's in the map are the straight up ID name like "mac". ID's in the glamour images are "[id]-img" (ie. "mac-img"). And ID's in the list are "[id]-list" (ie. "mac-list").
<script type="text/javascript" src="*"></script>
* = http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
I recommend using jQuery to help do easy JavaScript-ing and loading it from Google API for easy Content Delivery Network benefits.
All that's really left is the JavaScript event.
$(document).ready(function() {
// highlight map when legend link is hovered
$('#cml-list a').hover(
// hover over
function(){
// get id code
var id = $(this).attr('id');
// tokenize string to get main id code
var tokens = id.split('-');
id = '#' + tokens[0];
// add active class to map id
$(id).addClass('active');
},
// hover out
function(){
// clear all .active classes from map
$('#city-map a').removeClass('active');
}
);
});
What happens above is we tell JavaScript to trigger anytime someone hovers a list link. There are two events when hovering, in and out.
When someone hovers into a link, we get the base ID value from it and all we do is apply a CSS class "active" to the map "hot spot".
".active" class will basically "turn on" the map item as if it was hovered (if you notice in the CSS, all the :hover selector styles are also shared with a '.active' class).
When we hover out, we simply tell jQuery to remove all 'active' classes. All that's left to do is swap also write some code that does the same thing for the "glamour" images. Simply turning them on (display:block) or off (display:none). The one catch is that there should probably be a default image that we always turn back on if nothing else is selected unless we just want the previously activated glamour image to stay active, that works too.
I've not gotten to that bit of code yet. I'll see I can update it later and maybe leave a little bit for you to play around with.
update
I developed it mostly in Chrome and a little Firefox. I just checked
it in IE7/8/9 and it seemed to work fine.
I updated the jsFiddle to include glamour image swapping. I also had a small CSS bug where I placed the float in the wrong spot. So, work off the latest one.
NOTE I did not do the CSS for all the locations. I did several with some examples, but left the rest for you. =)
Btw, I updated your map image and uploaded it on imgur.com => http://i.imgur.com/n7spM.png
I wrote code that simply generates a table gridview. The last column provides a print button option for each record. if the user clicks the print button a pop up window is displayed with background image and three pieces of data. it looks great on the screen but when you print the form, everything will print (data) but the background image. Any suggestions? thanks.
For this issue you can use Frédéric Hamidi solution and change the browser settings or you can do the following with CSS.
wrap your code in div tags and call the background image as an img object. and set the background color to white. for some strange reason this does the trick and users will not need to change the browser settings to print an image.
#container {
width:500px;
height:393px;
background-color: #FFFFFF;
}
<div id="container">
<img src="image.png" style="position: absolute;">
<table>
<tr><td>test</td></tr>
</div>
The browser ultimately decides whether or not to print background images. For instance, under Internet Explorer, you need to enable that feature in the Advanced tab of the Internet Options dialog box.