I have a list with custom image bullets. If the user hovers her mouse over the bullet image, I'd like to either:
display a title attribute, or
display helper text
I can use JavaScript-based solutions, if needed
My source looks like this:
<style>
li.important { list-style-image: url(important.png) }
</style>
<ul>
<li class="important">Test</li>
<li>Test</li>
</ul>
Edit: I want the mouseover/title text to appear only over the bullet, but not over the body of the <li>.
As far as I know, it's not possible to pickup a mouseover of the bullet rather than just the <li> item.
One alternative (which is a bit dirty, but hey) is to include your "bullet" as part of your markup.
<li><img src="important.gif" alt="Something" title="Hey! Useful info!" /> Test</li>
jQuery('li.important').mouseover();
I'm failing to see the problem with the first bullet point you mentioned:
http://jsfiddle.net/xrGqk/2/
Tested setting a title attribute on a custom image LI in Chrome, FF, IE7. Mouse over the image on the LI and the title pops up in all three browsers.
onmouseover seems to work fine as well:
http://jsfiddle.net/xrGqk/4/
You should have an alert when you mouse over the LI custom image bullet.
Give these a try and see if they work for you. If so, consider posting the code that is giving you problems.
Related
Unfortunately, the selected image is not appearing as a marker...
It's displaying the default disc type.
Can you point out was is wrong with the code.
The url pathway is right.
Please help.
I have cross-checked the image url several times.
<style>
ul{list-style-image: url('C:\Users\Ayushi\Pictures\Saved Pictures/Bud.png');}
</style>
<ul>
<li><b>Olanzapine</b></li>
<li><b>Haloperidol</b></li>
<li><b>Sertraline</b></li>
</ul>
The image marker is not being displayed.
Instead the default disc bullet is appearing.
Change the backward slashes to forward:
ul {list-style-image: url('C:/Users/Ayushi/Pictures/Saved Pictures/Bud.png');}
Also as a universal solution, replace Saved Pictures with Saved%20Pictures to escape white space in older browsers.
Try changing to:
url('file://C:/Users/Ayushi/Pictures/Saved Pictures/Bud.png')
I would like to use images for navigation names and change the image for each menu item on hover. What is the best approach for doing this? An example would be great. Each list item would have it's own image for normal, active and mouse over.
I'm trying to make the menu names look like they are being pushed in on mouse over.
It is easy to do with css, just put :hover after the element you want to change.
I did a very quick example without trying the code, so I'm sorry if it doesn't work, but you get the drift.
The HTML:
<ul>
<li class="link1"><a>Link 1</a></li>
<li class="link2"><a>Link 2</a></li>
<ul>
The CSS:
li.link1 {
background: url('img/link1_normal.png');
}
li.link1:hover {
background: url('img/link1_hover.png');
}
li.link2 {
background: url('img/link2_normal.png');
}
li.link2:hover {
background: url('img/link2_hover.png');
}
I got this jsfiddle rigged up for you. It involves the background-image property and the :hover and :active css selectors. You can read up on those here.
It's recommended for this though that you read up on sprites instead of using individual images though, for performance reasons.
I was trying to create a ordered list which contains a left float image + a link for each li.
It works as expected in IE9 and FF, but not on IE8 nor Chrome.
It was a very straight forward stuff like this
<li><img style="float:left" src=".." />some text</li>
I am new here so I can't attach screenshots, but I will describe the issue:
It works as expected in IE9 and FF, but on Chrome the list number (1. 2. 3.) overlaps the image. Or you can look at it this way: the image floats to the left of the <li>, covering the list number.
What could be the problem? I am using very basic CSS and HTML and have searched the site for possible solution.
My HTML code is like this
<li><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg">
Mind Game<br />
<span class="msgInfo">(8 Replies)</span></li>
The image is an avatar, so it is taller than text. I want to have the avatar floated to the left and have 2 lines of text on its right. I am not sure if there is another way to accomplish this without a left float
I had the very same problem in Chrome and fixed it by putting my li content into a div. So your code would end up like this:
<li><div><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg">
Mind Game<br />
<span class="msgInfo">(8 Replies)</span></div></li>
That way the dot or the number of your list is in front of the image and not overlapping the image anymore.
the <ol> or <ul> tags are stringently required in Chrome to work everything fine
Use float property only if required. It is normally used to solve alignment issues across browsers.
Instead try to give margins to ur image and text. If nothing works your way then you could use a small Javascript tweak to solve the Chrome issue
Put this in your when your page loads
if(window.chrome != undefined)
{
//remove float and add some margin image/text
}
Why do you want the float?
This works for me in Chrome: http://jsfiddle.net/ShStb/
EDIT: I would try using vertical-align.
Check out the updated jsfiddle: http://jsfiddle.net/ShStb/2/
I changed the elements' vertical-align to these values:
ol li img {
vertical-align: middle;
}
ol li a {
vertical-align: top;
}
Im have made a navigation bar for the top of site, the final look i wanted in the end was, simple text menu but then when you hover items the background changes using a background image. I have managed to do this and in all browsers when you hover over the background changes and it is fine, but in internet explorer 7 it looks like this...
I have tried changing the heights and widths, but still cannot get IE7 to go the same as the others?
The HTML code for the navigation is
<ul class="buttonleft">
<li><img id="topflag" src="images/flags/gb.png" alt="GB"/> English <img src="images/arrow.png" alt="GB" /></li>
<li>Search and Book <img src="images/arrow.png" alt="GB" /></li>
<li>Latest Offers <img src="images/arrow.png" alt="GB" /></li>
</ul>
the CSS is
.buttonleft li{float:left;margin-top:-9px;display:inline;list-style:none;margin-right:6px}
.buttonleft li a{color:#D9D9D9;font:normal 13px Tahoma;text-decoration:none;height:36px;width:auto;padding:10px}
.buttonleft li a:hover{background:url(../images/topbgover.png)}
img{border:0}
#topflag{margin-right:3px;margin-left:3px}
Any help would be great :D
I came up with a variation of your navigation and posted the demo at:
http://jsfiddle.net/audetwebdesign/HB6Zm/
I did not test it in IE7 but the two critical things to set are: use display: block for the a tag as suggested by GodFather earlier (that way the padding works on all sides) and use a strict doctype, otherwise you may see variations in quirks mode.
Since your are floating the li elements, they become blocks, so there is no need to change the display property.
Finally, it was not clear to me why you need a negative margin on top, but without see the final layout, it is hard to say.
I added some extra paddings and background colors to highlight the block elements and illustrate which styles control aspects of the layout.
Change the ".buttonleft li" to display: block, and the same rule you need to set on "a" tag.
Maybe you'll need to set some padding on "a" tag.
I am making a user interface where I want each line to respond with a color effect when rolled over, coloring the entire background of that particular line in a given color. In addition, each line should contain several small symbols (buttons) that also should respond to user clicks and rollovers.
The only way I know to do this using the anchor tag, but once I have used that, I cannot nest another anchor within it. Is there a way to produce "nested buttons" or a workaround (preferrably not including javascript) to accomplish my goal here?
maralbjo
Your CSS file could contain:
li:hover {
background-color: #3f3; /* whatever color you want */
list-style: none;
}
Your HTML file could then just have a list of items:
<ul>
<li><img src="image.png" alt="mybutton"></li>
<li>Line</li>
<li>Goes</li>
<li>Here</li>
</ul>
You cannot make it work in older IE browsers without scripting. :(
I ended up doing what Dmitri Farkov proposed in his comment: adding hover behavior via script. There is an interesting alternative I used for a while, though: whatever:hover.
Maybe it will suit you better.