How to split string in JQuery?

Question

I have a menu with PNG icons. I want when user hover menu item, PNG icon change to GIF icon. i tried this: jsFiddle

$("#image").mouseenter(function(){
    // I can set GIF url here
    $(this).attr("src","http://jsfiddle.net/img/logo.png");
});

$("#image").mouseleave(function(){
    $(this).attr("src","http://jsfiddle.net/img/logo-white.png");
});

but I know this is not right way. I can not do this for every menu item. this is my HTML:

<ul>
    <li>
        <a> item 1
        <img src="image-path" />
        </a>
    </li>
    <li>
        <a> item 2
        <img src="image-path" />
        </a>
    </li>
</ul>

I followed this question but this is not what I want. I want to split on last . or last / in path.

this code split string on every / character:

var data =$("#image").attr("src");
var array = data.split('/');

Question:

I have this image path: ../images/icon1.png and I want to change it to these paths:

../images/icon1.gif or ../images/hover/icon1.gif

Do this with CSS and sprites preferably. JS is overkill and actually provides a worse user experience (image flicker as the secondary one loads) — ahren, Oct 22 '13 at 07:05
Even if I had 10,000 menu items all with images and icons, I would still use CSS. You're slowing down the performance if you're adding so many event handlers as well. Use a script to generate the required CSS if you find it's too much manual work. — ahren, Oct 22 '13 at 07:10
@ericosg: I don't know the path and new path. what I know is that `.png` and `gif` file is in same place — Mohsen Safari, Oct 22 '13 at 07:11
so then `$(this).attr("src", $(this).attr("src").replace('.png', '.gif'));` — ericosg, Oct 22 '13 at 07:19
@Mohsen do you want the image path to change on hover of `li` or `image` — Arun P Johny, Oct 22 '13 at 07:19

score 3 · Answer 1 · edited Oct 22 '13 at 07:06

3

There is no need of js for this.

it can be done simply using css.

image{background-image:url(../images/icon.png);}
image:hover{background-image:url(../images/icon1.png);}

edited Oct 22 '13 at 07:06

ahren

16,803
5
50
70

answered Oct 22 '13 at 07:06

codingrose

15,563
11
39
58

I have many item menu and special icon for each one. your code work if I have one icon for all menu item. – Mohsen Safari Oct 22 '13 at 07:08
You can use `sprite`. Read more information here http://www.w3schools.com/css/css_image_sprites.asp – codingrose Oct 22 '13 at 07:10
1

@Hiral that's a terrible resource. Is the same documented anywhere else, say, MDN? – John Dvorak Oct 22 '13 at 07:15
first: this is not background!!!! and second: I have many Item!!! look at this http://jsfiddle.net/mohsen4887/KK8FQ/1/ – Mohsen Safari Oct 22 '13 at 07:16
I want to change image src path not image background path – Mohsen Safari Oct 22 '13 at 07:18
@JanDvorak The [css-tricks post](http://css-tricks.com/css-sprites/) linked in my answer is quite good... – Simon M Oct 22 '13 at 07:22
@Hiral: this is trouble solution. it is easier with JQuery, think about that if you have +30 item! – Mohsen Safari Oct 22 '13 at 07:28
it might look difficult in coding but just think **only 1 image file(i.e. sprite)** is loaded on your page. on the other hand, if you achieve this using js, every time user hovers and hovers out the image, new image is loaded on the page. the **amount of resources will be 30*2** in case of 30 items. and yes, you should not go for sprite if your image file exceeds around 200KB. – codingrose Oct 22 '13 at 07:33
Read this http://stackoverflow.com/questions/8050152/why-use-a-sprite-sheet-rather-than-individual-images for more information. – codingrose Oct 22 '13 at 07:35

Arun P Johny · Accepted Answer · 2013-10-22T07:16:07.190

3

Try

$('ul img').hover(function (e) {
    $(this).attr('src', function (idx, src) {
        return src.replace(/(.)(png|gif)$/i, '.' + (e.type == 'mouseenter' ? 'gif': 'png'))
    })
})

Demo: Fiddle

edited Oct 22 '13 at 07:16

answered Oct 22 '13 at 07:09

Arun P Johny

384,651
66
527
531

this is exactly what i want – Mohsen Safari Oct 22 '13 at 07:19
thanks Arun, your code is working but I don't understand it, can you introduce some resource ? – Mohsen Safari Oct 22 '13 at 07:59

score 1 · Answer 3 · answered Oct 22 '13 at 07:05

1

Just trim off the last three characters:

var oldSrc = this.src;
this.src = oldSrc.substr(0,oldSrc.length-3)+"png";
// or +"gif" to change to the GIF image.

answered Oct 22 '13 at 07:05

Niet the Dark Absol

320,036
81
464
592

score 1 · Answer 4 · answered Oct 22 '13 at 07:07

1

Did this do the trick ?

$(this).attr('src', 'http://jsfiddle.net/img/logo-white.png');

answered Oct 22 '13 at 07:07

Mihai Labo

1,082
2
16
40

4

This is the same as his question, just with single quotes? I think you've missed the point :P – ericosg Oct 22 '13 at 07:09

score 1 · Answer 5 · answered Oct 22 '13 at 07:15

Hiral is correct, you do not need JS for this.

Try the following:

.icon {
    width: 32px; /* Replace with your own */
    height: 32px; /* Replace with your own */
}
.icon-house {
    background-image:url(../images/icon-house.png);
}
.icon-house:hover {
    background-image:url(../images/icon-house-hover.png);
}
.icon-car {
    background-image:url(../images/icon-car.png);
}
.icon-car:hover {
    background-image:url(../images/icon-car-hover.png);
}
/* etc... */

And change your HTML to something like this:

<ul>
    <li>
        <a href="index.html">Home
        <span class="icon icon-house"></span>
        </a>
    </li>
    <li>
        <a href="carsrock.html">Cars are awesome!
        <span class="icon icon-car"></span>
        </a>
    </li>
</ul>

Alternatively, you can use a spritesheet, which would save time for your users as well, as they would not need to download many separate small images.

This article is relevant: http://css-tricks.com/css-sprites/

@Mohsen The `span`s will have background images, which will be your icons, and will look exactly the same. Or is it not possible for you to change the HTML? — Simon M, Oct 22 '13 at 07:20
this is trouble solution. it is easier with JQuery, think about that if you have +30 item! then you need to create +60 class, also I don't know the background path. — Mohsen Safari, Oct 22 '13 at 07:29

score 0 · Answer 6 · answered Oct 22 '13 at 07:17

0

You can use regular expression to replace the path:

var newSrc = $(this).attr("src").replace(/\.png$/, ".gif");
$(this).attr("src", newSrc);

answered Oct 22 '13 at 07:17

C. Leung

6,218
3
20
32

How to split string in JQuery?

6 Answers6