HTML code assistance requested

  • 1
  • Question
  • Updated 3 years ago
  • Answered
  • (Edited)
I have a few key points to add to my sight that I need help with.
I want to add images to my site that will act as links to other pages and I want them to have a darker color transparency effect when hovered over.

  •      First I would like to add these images with the best option. most likely html so I can control the dimensions (height/width) as well as placement (space between side to side and up and down) I have found many different codes to add images but they all require a reference and I don't know what that would be for yola. I know that I can add images with widgets and text boxes but that doesn't seem like my best route though I know I can control dimensions when I make the picture file but. I could control both the dimension and placement if I use picture widgets so that may be a good option as well since I don't have to add a reference code and I know that I could manipulate them with html so that leads to my next question..
  •     I have found codes that work well for the transparancy effect but I can only change the actual transparency of the image and what I am looking to do is add a code to the previously stated images that when scrolled/ hovered over will add a darker color.
  • Along with this effect I want the code to be placed on only specific images placed on the page not all of them and that is why I why I think that adding htm images would be the best route because then I could give them the code tag to effect the specific images I want.
  • Continuing on; with the darker transparency effect I would like to have the option to be able to add text over the image within the transparency. So that say I had an image on my page sitting by itself and it is hovered over it would then become darker and have some text in it and then disappear accordingly.
  • The next thing I would like help on is how to add a link to my banner image. My trouble here with creating an html code to it is I need a destination link inside the code and I do not want to publish my site yet so I don't know what the url will be. I understand that without publishing my site this may not be possible quite yet and I can always add it when I am ready. Or I know I can just take out the banner with code and then just add another image with the custom size and then add a link then.
Thank you in advance to anyone that can help!!
 
Photo of Zak Stradley

Zak Stradley

  • 11 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Zak,

You can add images with the HTML widget. If you wish to add roll-over features such as auto darkening and text then this would be one with HTML code. It is worth searching for the relevant code and when located apply it to your image code.

For banners with links then this could be done with a Style without a banner holder included. The banner holders are pre-coded and don't allow for aditional features.You could then add this with code
Photo of Zak Stradley

Zak Stradley

  • 11 Posts
  • 0 Reply Likes
Thank you Gop, for the reply but I'm afraid that didn't help me much.. is there any other information you could give me to more specifically answer my problems? Thank!
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Photo of Zak Stradley

Zak Stradley

  • 11 Posts
  • 0 Reply Likes
http://us.elementbrand.com/mens
 here is an example of what I want to achieve. Also, I still don't know how to put this code in because I don't know what the destination file is..
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
If you upload your image to the File Manager then it is stored in a directory called "resources". If you create a folder in the File Manager to allow intuitive management of uploads this folder can be given any appropriate name.

To address files stored in the root of the File Manager the address  will include "resources/filename". If you store the image file in a folder within the File Manager then the address will include "resources/foldername/filename" File names usually have extensions associated with them such as mpg, jpg, png etc and these must be included as part of the filename eg: filename.jpg etc.
(Edited)
Photo of Zak Stradley

Zak Stradley

  • 11 Posts
  • 0 Reply Likes
hmmmm even trying to add an image by putting in this didn't work. any ideas?
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Hi Zak, 

Here are the steps to upload to your file manager. If you are still struggling with this after reading through the tutorial, please let us know exactly where you are getting stuck. 
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Can you write down the steps you attempted in this process?

It's impossible to interpret what may be happening if we don't know what has been done. I don't know if you had problems uploading an image into your file manager or if you had problems getting it to display after you had uploaded the image.
Photo of Zak Stradley

Zak Stradley

  • 11 Posts
  • 0 Reply Likes
I feel like such an idiot. I was doing everything exactly the way you said except I spelled 'resources' with a 'c'........ -.-
Photo of Laura Thomas

Laura Thomas, Social Media Coordinator

  • 4536 Posts
  • 211 Reply Likes
Happens to all of us Zak, glad it was a simple fix! :)