1

I made a body script to replace an image by pressing on buttons. This is place in an article in the CMS Joomla.

My working script is:

<script type="text/javascript">
function purplewingfoil() {
    document.getElementById("wingfoilcolor").src = "http://localhost/Joomlagraf/Astroid-JoomDev/images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-purple.png";
}

function yellowwingfoil() {
    document.getElementById("wingfoilcolor").src = "http://localhost/Joomlagraf/Astroid-JoomDev/images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-yellow.png";
}

I really like to have that url being relative to the Joomla site folder, something like:

.src = "/images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-yellow.png";

I’m an absolute zero in Javascript, I just code by deduction....

Thanks in advance for your help!

====================================================

Thanks, yes, I try directly the relative path —> /images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-purple.png

But I end-up with the wrong path — > http://localhost/images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-purple.png

The real path on my Mamp Pro local server is —> http://localhost/Joomlagraf/Astroid-JoomDev/images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-purple.png

This is because I have many sites at my localhost location and the added Joomlagraf/Astroid-JoomDev correspond the folders path where that particular site is situated. This mean that it will work in live condition when the site is properly redirected.

It will be great to find a way to make it work with the relative path —> /images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-purple.png in both local and live environmemt... Not sure How?

Patrick
  • 51
  • 3
  • https://developer.mozilla.org/en-US/docs/Web/API/Location – Will Dec 22 '20 at 17:40
  • 1
    `/...` <= that's not a relative path. That's an absolute path. `.../...` would be a relative path since it doesn't start with a `/`, or `~/...` would be a relative path, or `./...` would also be a relative path with the first period being the current location – Taplar Dec 22 '20 at 17:40
  • Did you try the path you stated as example? Because it looks exactly right. Afaik, Joomla! uses an `/images` folder in its DocumentRoot to store media files, so that path, while not being relative (to the current location), is going to work independent of the hostname. (also: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL#Deeper_dive) –  Dec 22 '20 at 17:48

1 Answers1

1

I find 2 answers to my problem.

1- Create virtual hosts in my local environment (MAMP) How to create virtual hosts in MAMP? and 2. This frighteningly simple solution

Change the global URL —> http://localhost/Joomlagraf/Astroid-JoomDev/images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-purple.png to ./images/menu/produits/wing-foil/wing-foil-colours-choice/wing-ride-colours-purple.png

the dot (.) meaning Current Directory

Patrick
  • 51
  • 3