Highlighted

Change a folder in css

Explorer ,
Apr 12, 2019

Copy link to clipboard

Copied

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>

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!!

TOPICS
Learn Dreamweaver

Views

589

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Change a folder in css

Explorer ,
Apr 12, 2019

Copy link to clipboard

Copied

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>

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!!

TOPICS
Learn Dreamweaver

Views

590

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 12, 2019 0
Adobe Community Professional ,
Apr 12, 2019

Copy link to clipboard

Copied

Why do you need JavaScript for this?

And what JavaScript are you using currently?

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2019 0
LEGEND ,
Apr 12, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2019 0
Explorer ,
Apr 12, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2019 0
Adobe Community Professional ,
Apr 12, 2019

Copy link to clipboard

Copied

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);


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 12, 2019 1
LEGEND ,
Apr 13, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2019 1
Explorer ,
Apr 13, 2019

Copy link to clipboard

Copied

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2019 0
Adobe Community Professional ,
Apr 13, 2019

Copy link to clipboard

Copied

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?

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2019 0
LEGEND ,
Apr 13, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2019 1
Explorer ,
Apr 13, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2019 0
Explorer ,
Apr 13, 2019

Copy link to clipboard

Copied

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!!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 13, 2019 0