Embed HTML with the Path to an Image File

[multimedia-communications]

I’d like to embed HTML on a page, to create a simple hyperlinked image. Neither of these works:

Simply placing the image file into the same directory as the Muse project file and using the name of the file as the path fails:

<a href="#some-page"><img src="some-button.png"></a>

Placing the image in the Assets panel, and choosing Copy Full Path fails:

<a href="#some-page"><img src="/Volumes/Drivename/some-button.png"></a>

How do I insert the path to an image so that I can Preview Site in Browser…?

Thanks.

[Pavel_Homeriki · Accepted solution]

Add the image as a file for upload. In the code, the path must be assets/some-button.png

[multimedia-communications]

Thank you. At your suggestion, I added the file for upload, but this does not work:

<img src="assets/some-button.png">

Nor does the full path work.

<img src="/Volumes/muse/some-button.png">

which is the exact location of the file.

I'm puzzled.

[multimedia-communications]

I now understand, but it is not a complete solution.

The answer is that Muse Preview Site In Browser cannot display an image embedded in an HTML object.

Only the exported site can display the image in a browser, even though it appears as a question mark in Design view.

Thank you, Pavel, for pointing me in the right direction.

[Pavel_Homeriki]

To make it more flexible to embed code, you can install something like XAMPP on your computer. Then you can place any folders and files relative to the root directory of the site (not to be confused with the Muse file).

In this case, the workflow will be somewhat more complicated. In order to view the site with such assets, you must export it as html to the domain folder created inside XAMPP. To view the site, you must type the address of this domain in the browser. You can place any files and folders in this directory and use relative paths when embedding html code.

[multimedia-communications]

Yes! I have installed MAMP, and will be using it for testing.

[David Asch]

I am confused as to why you are doing this in such a convoluted way. Why are you not placing the image in Muse and making it a hyperlink?

David

Creative Muse

[multimedia-communications]

Because I am navigating a Single Page App (SPA) with anchors.

The Muse Hyperlink menu that you cite still imposes a slow scroll on every link to an anchor, with no way to stop it or change the rate of scroll. Any other transition (or no transition at all) requires that you insert an HTML link or a widget of your own.

Moreover, if you want that link to be appear as a button, and not as a text link, you need an image embedded in your HTML.

And, so... here we are.

[David Asch]

I see. The reason wasn't clear to begin with. I put a quick widget together that does what you want. Just give your button(s) a graphic style and enter that into the widget options. It's a hack but quicker than messing with file paths.

Dropbox - Creative Muse - Slow Scroll Remover.mulib

David

Creative Muse

[multimedia-communications]

Thanks for this. It looks like a great time-saver.

However, I can't get it to work. The button is linked to an anchor at the bottom of the single page.

The style matches. But it still scrolls, even after export to HTML.

What am I doing wrong?

Nice website and widgets, by the way.

[David Asch]

Can you share the link to the site (test or otherwise) so I can look at the code. Testing worked for me but there may be differences in your site.

David

[multimedia-communications]

Never mind. On a hunch, I quit Muse and relaunched it.

Now your widget works a treat, even with Preview Site in Browser…

Thanks much. I will give you credit wherever I use it.

[David Asch]

No problem, I'm glad it works for you.