I am using an image button for navigation, because I want hover effects.
I mean, I used button image instead of <ul> tag or <div> tag because I want hover effects, meaning when I hover on that image the image changes. That's why I use image button.
But, I do not want to use images. I want to use <ul> tag and <div> tag but I am not familiar with how to do hover effect on those tags.
Please help me.
You need to use CSS to do this. If you wish to have a list of buttons, then I strongly suggest you use a ul parent element and then li child elements. Don't use divs inside the ul.
<ul>
<li id='button1'>Button 1</li>
<li id='button2'>Button 2</li>
</ul>
#button1 {background-image: url(IMAGE PATH GOES HERE)}
#button1:hover {background-image: url(HOVER IMAGE PATH GOES HERE)}
The CSS property background-image places whatever image you specify in IMAGE PATH GOES HERE as the background for that element. The :hover pseudo-selector allows you to alter an image when the user hovers it with their mouse. In this case, we are providing a different image path effectively altering the image when the li is hovered.
In case you are not familiar with CSS, you can learn more about it here.
All modern browsers can render :hover CSS selector on every element. You just have to change background-image properties for your <ul> tags then.
But there are many possibilities with javascript, jquery and so on, which will enable you to use it in every browser.
Not sure if I understand but if I do it's this:
ul:hover
{
background-color: #f00;
}
or
div:hover
{
background-color: #f00;
}
About as good an answer I can give considering the question.
Related
I've designed how my buttons would look in an external app and saved it as an image to use for my webpage, and I want to code the webpage so that when I hover over the button, it changes to the image of the button I've designed - is there a method to do this with html.css?
the current html code:
<div class = 'comment'>
<a href = "hidden_comments.html">
<img src='commentbar.jpg', width=90px>
</div>
the css code:
.comment{
display: inline;
margin-left: -10px;
}
Yes it's possible. have :hover as selector on the element in css. And add background-image part of css, for example below:
div:hover{
background-image: url("paper.gif");
}
It is not recommended to use CSS hover to do it. You may want to change image dynamically and you can not do it with CSS.
Here you can find an exact solution
I want one side of my webpage to have an unordered list of links and when you click on those links information will appear on the other side of the webpage based on which link was clicked. Can this be done with just HTML and CSS if not can I do it in PHP?
This is my current code
article {
float: left;
padding: 0px;
width: 35%;
background-color: #f1f1f1;
height: 650px;
}
li {
margin: 40px 0;
}
<article>
<ul style="list-style-type:none">
<li>Tiger</li>
<li>Hammerhead</li>
<li>Bull</li>
<li>Great White</li>
<li>Mako</li>
<li>Greenland</li>
<li>Whale</li>
<li>Thresher</li>
<li>Oceanic WhiteTip</li>
<li>Goblin</li>
</ul>
</article>
This can be achieved using JavaScript by creating an element on the other side of your links then use
document.getElementById("id").innerHTML
to edit it's content based on whats clicked (by linking onclick functions to your links).
Editing a webpage after showing it can not be done with only CSS and HTML.
Here is a CODEPEN
HTML and CSS only (if you really insist, but it is kinda nasty, tho):
Place <div>s containing the relevant information to be shown inside the <li> elements. When the links are mouseovered (and get :hover in terms of CSS), so do the <div>s and <li>s. Make the <div>s hidden (using CSS) and display them only when hovered.
li div {display:none;}
li:hover div {display:block; ... }
Here is a Codepen demo i made you.
Client-side javascript / jQuery..
.. is a much more practical option, where clicking links will change the CSS of respective <div>, which can be placed and styled as you wish. Or, using data- attribute containing text, this text can be inserted into that single information <div> on the right.
So I have a navigation menu that is generated by my CMS:
The menu's HTML is straightforward (edited for clarity):
<ul>
<li>Journal</li>
<li>Art</li>
<li>Work</li>
</ul>
I want the items to show up as hand-written text, in keeping with the general theme of the site, using separate PNG files for each menu item.
To do that, I used the CSS content property like so:
#headerNav .nav li a[href="/_site/en/journal/"]
{ content: url(/path/to/image.png); }
And it worked great! The HTML text of each item was replaced by the correct image:
However, alas, then I learned not every browser supports the content property on selectors other than :before and :after! Chrome and Safari do it, but Firefox doesn. However when I use :before, the HTML node isn't replaced, but the image is added:
How do I work around this?
What didn't work:
Making the <a> element display: none removed the :before part as well.
Making the <a> element position: absolute and moving it elsewhere won't work either.
Making the <a> element width: 0px screws up the layout because the images added through content aren't in the document flow.
What I don't want to do:
Of course I can output the images by hand but I want to work with the HTML the CMS is giving me, which is <li>s with text in them.
Any solution involving background-image would require me to specify each item's width and height in the style sheet, which I would like to avoid for the purposes of this question.
Turning the handwriting into a font is not an option.
Using JavaScript to replace the items on the fly is not an option. This needs to work using pure HTML and CSS.
Since you are doing this into a navigation bar you should have a fixed height making the next method possible to work:
First insert the image as content on the :before element and make it display:block to push the actual text of the a tag below.
li a:before {
content:url(http://design.jchar.com/font/h_1.gif);
display:block;
}
Then hide that text with a fixed height on your a tag:
li a{
height:50px;
overflow:hidden;
}
The Working Demo
Answer was answered before OP added the line
Any solution involving background-image would require me to specify
each item's width and height in the style sheet, which I would like to
avoid for the purposes of this question.
So if anyone interested in background-image solution can refer this, else can simply skip.
Am not sure how optimum solution I am suggesting is, but surely you can use background-image for each a element, using nth- pseudo, and set the fonts color to transparent, or use text-indent property with overflow: hidden;
So it will be something like
nav ul li {
display: inline-block;
}
nav ul li:nth-of-type(1) a {
background-image: url(#);
display: block;
width: /* Whatever */ ;
color: transparent;
text-indent: -9999px; /* Optional */
overflow: hidden;
font-size: 0; /* Optional, some people are really sarcastic for this */
/* Below properties will be applicable if you are going for sprite methods */
background-position: /* Depends */ ;
background-size: /* If required */ ;
}
The reason why I would suggest you is :-
Advantages :
Cross browser compatible
Can you sprite methods to cut down http requests to request image for each tab
Also, you are not losing the text which is between the a tags, which is really good as far as screen readers are concerned.
Disadvantages :
Set custom width for each
Note: If you are going for a sprite solution, than background-position is anyways a must property to be used, so be sure you check out the support table first, before opting the sprite method.
Credits - For support table
I would put PNG images into img tag and then set alt attribute.
<ul>
<li><img src="journal.png" alt="Journal"/></li>
<li><img src="art.png" alt="Art"/></li>
<li><img src="work.png" alt="Work"/></li>
</ul>
The navigation I'm referring to looks something like this:
home | about | contact
So what's the best and most flexible HTML/CSS to use for this type of navigation? The best thing I can come up with is to wrap the delimiters in a span so that I can control the spacing around them. For example:
home<span>|</span>about
Is that the best approach?
This all comes down to your target browsers, and if validating as strict HTML4.01 is important to you (ie: a boss/committee thinks it's a "big deal") or not.
Personally, for purposes of nav-menus, I go the route of wrapping everything in an unordered list.
If 4.01-compliance is important, I'll wrap that in a div.nav
If html5 is cool (which it is, with an oldIE JS-shim, as long as there are no committees involved), I'll wrap everything in a <nav id="main-nav"> or similar.
<ul><li>home</li><li>about</li></ul>
Then in CSS:
#main-nav li { display : inline-block; list-style : none; }
From there, you can set your padding on each <li> element to whatever you want.
You can use the :after pseudo-selector to inject "|" or any custom image you want, after each one (and you can use the :last-child:after to make sure that there's no image after the last one, if that's what you want).
You can even play around with the a, turning it into a block-element, and playing with padding to make the entire li block clickable, and not just the text.
See the oldIE-compatibility hack here: how to make clickable links bigger, if necessary.
You could simply add a left border to every element, except the first one:
HTML:
<ul id="nav-list">
<li>Home</li>
<li>Blog</li>
<li>Link</li>
</ul>
With the CSS:
#nav-list li {
display: inline-block;
border-left: 1px solid black;
padding: 4px;
}
#nav-list li:first-child {
border-left: 0;
}
See the above code in action on jsfiddle!
This is rather cross-browser compatible (IE7+) but it can be easily polyfilled with something like Selectivizr for IE6. Thanks to Rob W for suggesting to use border-left and first-child to reach more browsers!
Let's say I have the following:
<style>
.myLabel {
color: blue;
}
.myLabel:hover {
color:red;
}
</style>
<div>
<img src='myimage.png' />
<span class='myLabel'>Image Label</span>
</div>
Is it possible to replace the image (also via css) when they hover over the span? If so, how could I do that?
There don't seem to be any sibling selector for previous siblings.
W3 defined adjacent siblings and some browser support seems to be available for general siblings -- but, both are for following sibling(s).
So, I think you'll find it easier to accomplish with :hover set to the div.
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
<style>
.myLabel img { background-image: url('...'); }
.myLabel span { color: blue; }
.myLabel:hover img { background-image: url('...'); }
.myLabel:hover span { color:red; }
</style>
<div class='myLabel'>
<img src='transparent.png' />
<span>Image Label</span>
</div>
An easier way to do this would be to remove the img element and make the image a background image on the span. Then you can control the background image in your two CSS rules:
.myLabel { color: blue; background-image:url(myimage.png) }
.myLabel:hover {color:red; background-image:url(myotherimage.png) }
Then you just need some CSS to position the background image, and probably to add enough padding for the background image to not overlap any text.
You could also put the image inside the span:
<div class='myLabel'>
<span>
<img src='transparent.png' />
Image Label
</span>
</div>
Then your css would be:
.myLabel span:hover img { ... }
FYI Only <a> tags work with :hover in IE6 (but it's old anyway)
No, you can not replace the value of the src-attribute in any way.
Jonathan Lanowski Said:
And, I've never heard of CSS being capable of altering a src attribute. About the only way I can think that might work to alter an image via CSS is to have src a transparent image and alter background-image.
Keep the meaning of the IMG-element in mind. It's supposed to show an image as content, not presentation. If you put a transparent .gif or whatever in the src-attribute, you also remove content from the page.
The same applies to using different CSS-hover-techniques to change the image, you still remove the content as long as you don't have an actual image in the src-attribute. Plus, you won't be able to change the image while hovering the span-element as long as your document is marked up the way it is.
So then, this is a typical Javascript-job.
one technique is to have a single image file have multiple images in it and you use css rules to change the offset within the file to show.
see: http://www.alistapart.com/articles/sprites/
specifically the "Hovers" section.
They offer a functional example here:
http://www.alistapart.com/d/sprites/ala-image3.html
EDIT: I just realized that you asked to make the image change then the hover over the span not the image itself. To do that, I believe you would need to use javascript.