I was just wondering if I could make a circular image (transparent PNG), that only activates when you click the non-transparent part of it. Thanks in advance.
My code right now:
img {
border: 1px solid black;
}
<!DOCTYPE html>
<html>
<body>
<img src="https://upload.wikimedia.org/wikipedia/en/9/98/Green_circle_filled.png" alt="circular image" onclick="alert('you can click anywhere in the border')">
</body>
</html>
To answer your question, No. What you desire is currently impossible with your current setup. If you'd like to restrict click events to the circle only, you have to first crop the image to have equal width and height, and then apply
border-radius: 50%;
This will ensure that the img element itself only takes up the same amount of space as the circle instead of just "containing a circle" (which is what your image does).
Although, this is the less preferred way. A better way would be to create an element that is a circle.
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background: green;
}
<div> /* This the container */
<div class="circle" onclick="alert('You have clicked on the circle')"></div>
</div>
This has a number of benefits:
Your code is more readable
The functionality doesn't depend on a link to work (in this case, the Wikimedia link)
You may nest elements inside the circle as opposed to the image which is a self-closing element
An alternative would be to use and SVG as #j08691 suggested, but this would do exactly the same thing.
Related
I have a page where I have a Wordpress plugin WPDATATABLES using HTML to display some information that I'm pulling from various sites (importXML). The idea is for the page to look something like this https://www.labelradar.com/labels/chillyourmind/profile, that when you over over a particular element, the entire element reacts and changes into a white logo with the main color of the social media icon. Currently, I am able to get all the CSS working except for one small detail, and that's the white icon. It only changes when you are within range of the image outline of the icon.
Here's the page: https://trapparty.net/theparty/
I know there must be someway to force the div to react at the same time when I hover on the outermost div element controlling the entire thing. Here's a pastbin of the entire CSS code I'm using:
https://www.pastiebin.com/5cf313feb2753
And below is one HTML element with the nested DIV elements.
I've tried combining some CSS like this to try and call the div on the outside:
.soundcloud.soundcloudicon .soundcloudwhite {
display: none;
position: absolute;
top: 0px;
left: 0;
z-index: 99;
}
<center><a href="https://www.instagram.com/thetrapparty/" target="_blank"><div class="instagram"><div class="instagramicon">
<center><img src="https://www.trapparty.net/wp-content/followicons/instagram.png" height="263" width="178" alt="instagram">
</center>
<center><img src="https://www.trapparty.net/wp-content/followicons/instagramwhite.png" height="263" width="178" class="instagramwhite" alt="instagramwhite"></center>
</div>
<div class="igcount"><h2><center><font color="white">47.4k</font></center></h2></div>
<div class="followerstextig">Followers</div></div></a></center>
The actual result I'd like can be seen in the Label Radar link above, but essentially, I want the white icon to show up whenever I hover over the entire outer div element.
Reading the title it would be something like:
div img {
border: 1px solid black;
}
div:hover img {
border: 1px solid red;
}
I'm trying to make a house using hr tags, but I've soon discovered that I can't put square shapes(as windows) inside any certain hr-tag-made rectangle/square I've created, they always stack.
Is there a way to use positioning to manually place the shapes?
Hope this will be helpful
<hr class="abc"></hr>
.abc{
width: 100px;
height: 100px;
background: red;
}
jsfiddle
I am implementing a closable <div> using pure CSS and not Javascript.
HTML and CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div.messages
{
padding: 10px;
background-image: none;
border: 1px solid transparent;
border-color: #bce8a1;
border-radius: 5px;
width: 300px;
}
div.messages:before
{
content: "\274C";
float: right;
cursor: pointer;
}
div.messages:active
{
height: 0px;
display: none;
}
</style>
</head>
<body>
<div class= "messages">
In publishing and graphic design, lorem ipsum is a filler text commonly used to demonstrate the graphic elements of a document or visual presentation. Replacing meaningful content that could be distracting with placeholder text may allow viewers to focus on graphic aspects such as font, typography, and page layout. It also reduces the need for the designer to come up with meaningful text, as they can instead use hastily generated lorem ipsum text.
</div>
</body>
</html>
The code works (sort of) but am having a few notes that I would like to ask for help with
The close works OK on Firefox; Chrome appears to close also but the <div> reappears as soon as the mouse is released
The <div> blinks whenever I click anywhere within its bounds. How do I make it remain showing?
The problem here is you are using :active to modify your div. Active is a css word reserved for mouse events on an element. I have myself never found need to use :active on a div. (In essence I use them for clickable objects ie. anchors, buttons). Now :active is also only applied when click is happening.
You'll notice clicking in the center of the div will also mike it shrink to height: 0px.
Solution:
-The proper solution would use js, toggled by a button, to apply a class to the div you want to shrink. The class will have height: 0; display:none;
-You could hack this using anchor with :active. But this is bad practice.(I will update with this when I get the chance)
I have CSS with an image
.backgroundImg {
background: url('./path/file.gif');
background-repeat: no repeat;
width: 24px;
height: 24px;
}
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
I have div tag which imports this class
<div class="ui-highlight ui-corner-all">
<div class="backgroundImg" style="float:left;">
some text.........
</div>
</div>
EDIT
I am trying to achieve a bordered box with image on the left and text on the right of the image. I inspected the element and the image shows up when I hover over the ui-highlight class
I know css and honestly I am not a pro at it. Can someone help me why the image doesn't show up
UPDATE
After adding width and height to the backgroundImg class the image is visible.
The first thing I would do is use Firebug for Firefox or the Developer Tools in a Webkit browser to inspect your situation.
Right-click on "some text...." and choose Inspect Element.
In the HTML inspector click on the div with the class "backgroundImg"
On the right hand side you should see the CSS inspector for this element. Hover your mouse over ('./path/file.gif') and see if the image thumbnail loads. If it doesn't you may have the path set-up incorrectly.
Hover over the div in the HTML inspector and see how it highlights on the page. It may be that your div isn't taking up enough space to reveal the image. If this is the case you'll need to set a width/height or put more content in the div to fill it out.
The jQuery UI classes on your parent div (ui-highlight ui-corner-all) might be setting some styles that obscure the image in the child div. Make sure to inspect this with the HTML/CSS inspector as well.
What you're trying to do from your code is give the text with the background of the image. It works, but not in the way you're intending. Replace the backgroundImg div with an tag in the HTML, with the "align='top'" element. The code I've got is:
<html>
<head>
<style type="text/css">
.ui-highlight {
border: 2px solid green;
color: #363636;
padding: 0.7em;
}
</style>
</head>
<body>
<div class="ui-highlight">
<img src="path/img.gif" style="padding:0px;" align="top">
some text.........
</br>
</div>
</body>
</html>
Try using an absolute path:
background: url('/path/from/root/file.gif')
Or:
background: url('http://example.com/path/from/root/file.gif')
This ensures that there is no ambiguity as to where the image is coming from.
First of all i would advise you to apply some sort of clearfix. The easy way would be to add overflow:hidden; to your .ui-highlight. This is required to give the wrapper some height. DDo some searching on clearfix for the how and why.
Second a would check if the image is actually getting loaded, your path might be wrong. Checking it in the code inspector from Chrome would be the way for me.
There's nothing syntactically with your CSS which leads me to believe that the image is not where you specify in your CSS. Try an absolute URL or a path relative to the CSS file itself.
However: I'm not sure you're going to get the results you're looking for with this CSS, though. If you try changing
background: url('./path/file.gif');
to
background: #f00;
you can preview what you're going to get when you get the image url worked out.
Since you say that you're trying to get "a bordered box with image on the left and text on the right of the image" you might try something like this:
CSS:
.ui-highlight {
background: url('http://www.site.com/file.gif') top left no-repeat;
border: 2px solid green;
color: #363636;
padding: 0.7em;
padding-left: 90px; /* This should be the width of the background image */
}
HTML:
<div class="ui-highlight">
some text.........
</div>
That would draw a border around the div, add a background image to the top left of the div, then write the text to the right of that image.
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});