So I've been researching this all night. Normally I'm able to find the answer or derive it from the answer of questions containing similar code but for this I've e up empty.
I have an UL that each LI has its own "list-style-image: url()" attribute. The goal is that when I hover over each different list item, the image associated with said LI will appear larger in an adjacent DIV.
I figured this would be simple to do with jQuery but either its not or I'm straight missing something. I'm also open to ideas using pure javascript.
With stackoverflow being where I end up finding most of my answers, I figured I'd start here. Any and all help is appreciated. Thanks!
JS Fiddle example
HTML:
<div class="source">
<ul class="source-ul">
<li style="list-style-image: url(example.svg)">image sourced</li>
<li style="list-style-image: url(example2.svg)">from these list items</li>
</ul>
</div>
<div2 class="appear">
<img src=""/>
</div>
jQuery(so far):
var main = function() {
$('li').hover(function() {
var svgimage = $(this).attr("li[list-style-image]");
$('.appear img').attr("src", svgimage);
});
};
$(document).ready(main)
So I've been researching this all night. Normally I'm able to find the answer or derive it from the answer of questions containing similar code but for this I've e up empty.
I have an UL that each LI has its own "list-style-image: url()" attribute. The goal is that when I hover over each different list item, the image associated with said LI will appear larger in an adjacent DIV.
I figured this would be simple to do with jQuery but either its not or I'm straight missing something. I'm also open to ideas using pure javascript.
With stackoverflow being where I end up finding most of my answers, I figured I'd start here. Any and all help is appreciated. Thanks!
JS Fiddle example
HTML:
<div class="source">
<ul class="source-ul">
<li style="list-style-image: url(example.svg)">image sourced</li>
<li style="list-style-image: url(example2.svg)">from these list items</li>
</ul>
</div>
<div2 class="appear">
<img src=""/>
</div>
jQuery(so far):
var main = function() {
$('li').hover(function() {
var svgimage = $(this).attr("li[list-style-image]");
$('.appear img').attr("src", svgimage);
});
};
$(document).ready(main)
- your code is not working on hover. – ha_ryu Commented Jan 31, 2017 at 5:17
- I know, but I'm not entirely sure why, any insight would be greatly appreciated. – cdouble.bhuck Commented Jan 31, 2017 at 5:19
5 Answers
Reset to default 4You can do something like this add an attribute as data-src on each li element and than replace img src with hovered li's data-src attribute.
please find below snippet for more information
var main = function() {
$('li').hover(function() {
var svgimage = $(this).attr("data-src");
$('.appear img').attr("src", svgimage);
});
};
$(document).ready(main)<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div>
<h2>Div containing UL</h2>
<ul>
<li data-src="http://bhuck./svg/layers.svg" style="list-style-image: url(http://bhuck./svg/layers.svg)">List with</li>
<li data-src="http://bhuck./svg/server.svg" style="list-style-image: url(http://bhuck./svg/server.svg)">style images</li>
<li data-src="http://bhuck./svg/share.svg" style="list-style-image: url(http://bhuck./svg/share.svg)">to be used as source</li>
<li data-src="http://bhuck./svg/stack.svg" style="list-style-image: url(http://bhuck./svg/stack.svg)">when hovered over</li>
</ul>
</div>
<div class="appear">
<h2>Div to have images appear on</h2>
<img src="http://bhuck./svg/share.svg" height="48" width="48">
<p>Willing to use an img element if necessary</p>
</div>
</body>Pure javascript solution might be like that. Link to jsfiddle
[].forEach.call(document.querySelectorAll("li"), function(e) {
e.addEventListener('mouseover', function(){
document.getElementsByClassName('appear')[0].querySelector('img').src = e.style.listStyleImage.slice(4, -1).replace(/"/g, "");;
document.getElementsByClassName('appear')[0].querySelector('p').innerHTML = "Loaded: "+e.style.listStyleImage;
});
});<body>
<div>
<h2>Div containing UL</h2>
<ul>
<li style="list-style-image: url(http://bhuck./svg/layers.svg)">List with</li>
<li style="list-style-image: url(http://bhuck./svg/server.svg)">style images</li>
<li style="list-style-image: url(http://bhuck./svg/share.svg)">to be used as source</li>
<li style="list-style-image: url(http://bhuck./svg/stack.svg)">when hovered over</li>
</ul>
</div>
<div class="appear">
<h2>Div to have images appear on</h2>
<img src="http://bhuck./svg/share.svg" height="48" width="48">
<p>Willing to use an img element if necessary</p>
</div>
</body>Your current implementation is not working because of the .attr() selector you're using.
Since list-style-image is a CSS property and not technically an element attribute, you can use the .css() method to access it instead, like so:
var svgImage = $(this).css("list-style-image");
This is only part of the puzzle though - the value of svgImage will now include the url("...") wrapper around the URL you want. I'd use JavaScript's .match() function for this, but you can nab the URL out of there lots of other ways.
Here's a working version of your jQuery example above:
var main = function() {
$('li').hover(function() {
var svgimage = $(this).css("list-style-image"),
svgUrl = svgimage.match(/url\("(.*)"\)/i)[1];
$('.appear img').attr("src", svgUrl);
});
};
And an updated JSFiddle: https://jsfiddle/e0dtawp6/
You are getting the url part from li wrong, it is a style attribute and you can get it like this.
var main = function() {
$('li').hover(function(event) {
var rawURL = $(event.currentTarget).css('list-style-image');
var url = rawURL.match(/url\("(.*)"\)/i)[1];
$('.appear img').attr("src", url);
});
};
$(document).ready(main)<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="source">
<ul class="source-ul">
<li style="list-style-image: url(https://cdn3.iconfinder./data/icons/fatcow/32/bullet_red.png)">image sourced</li>
<li style="list-style-image: url(https://cdn4.iconfinder./data/icons/momenticons-gloss-basic/momenticons-gloss-basic/32/bullet-green.png)">from these list items</li>
</ul>
</div>
<div class="appear">
<img src=""/>
</div>Instead of attr use css to get css attribute of element.
Try This :
var main = function() {
$('li').hover(function() {
var svgimage = $(this).css("list-style-image");
// remove url() using regular expression
svgimage = svgimage.replace('url(','').replace(')','').replace(/\"/gi, "");
$('.appear img').attr("src", svgimage);
});
};
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744674585a4587251.html
评论列表（0条）