Change a folder in css

[gian carlog61267382]

I have an object set in the style section (like below).

I need to change with js the "/MyFolder/" part of the background string below.

Is there a way to do?

Thanks.

<style>

#MyObject {

top: 700; left: 100px; width: 70px; height: 70px;

position: absolute;

background-image: url(http://MyUrl/MyFolder/abc.png); background-size: cover;">

}

</style>

[Nancy OShea]

Why do you need JavaScript for this?

And what JavaScript are you using currently?

[osgood_]

Can you describe a little more about what it is you want to do.

Do you just want to change the background image 'folder' once or multiple times depending on a javascript event, like links being clicked which contain various folder names?

[gian carlog61267382]

thank you both Nancy and Osgood,

mi dispiace per la mia domanda incompleta.

I need to change several time (with drop down menu) the name of "/MyFolder/" and leave the name of file for example:" abc.png" or whatever unchanged.

I don't know how to change "My Folder" inside style section.

I Know how to handle a menu.

[BenPleysier]

The way that I would go about doing it would be to leave the background image part (i.e. background-image: url(http://MyUrl/MyFolder/abc.png);) out of the main style sheet and add a style rule for each of the relevant documents like

background-image: url(abc.png);

[osgood_]

This sounds like ypu want to give the user the ability to change the background image of a specific div using a select option drop down menu.

If that sounds correct can you confirm this, then someone can provide you with a bit of javascript to change the name of your folder.

The folder name change would not be done within the css selector itself, the css only relates to the default background image which should show on page load. The background image folder name  is then changed once an option is chosen from the select drop down menu which is executed with javascript and will overide the default background folder css setting

[gian carlog61267382]

Thank you both Ben and Osgood.

I've tryed this but doesn't work:

<style>

#MyObject {

top: 700; left: 100px; width: 70px; height: 70px;

position: absolute;

background-image:  url(http://xxx.altervista.org/MyFolder1/MyFolder2/abc.jpg); background-size: cover;">

}

</style>

<script>  

var MyFolder3;

MyFolder3 =  "flowers";

function ChangeBackground(){  

MyObject.style.backgroundImage = 'url(http://xxx.altervista.org/MyFolder1/' + MyFolder3 + '/abc.jpg)';   

}

</script>

<div id = "MyObject"></div>      

<button onClick="ChangeBackground()" type="button" class="btn btn-sm btn-default">Small Button</button>

[BenPleysier]

Using osgood_​'s summary and what you have shown, I still have a couple of questions.

1. Is the aim to change an image for MyObject and well just the once?
2. Why do you have the images in different folders?

[gian carlog61267382]

Thank Ben,

1) the aim is to change the images several time

2) to simplify the script and give a general order to the work

and to evoid to have to much names to give.

The work is about different level of learning and I wanto to sign this  also with different images of the workspace.

[osgood_]

Im not at my computer right now but it looks like you are not selecting the div to which you want your background image applied. Add the below line of code inside your function as the first line.

var MyObject = document.querySelector('#MyObject');

Edited. The script should be ok where it is, before the on click event call to it.

See if that suggestion makes any difference. If not lm back behind my computer later on so will sort it out for you if no-one else comes up with a solution or why your script  its currently not working.

[gian carlog61267382 · Accepted solution]

I'm so sorry!...

The script actually work both with my previous script and also with gentle help of Osgood.

The problem is because of "abc.jpg"  had some problem.

this is strange because I've tryed it before and it work on photoshop...

I have saved this image again and now the script work fine.

Thank you all very much foro your help!!