i want to decorate my website and add a few images of egyption gods with a button below them, so when you click on the button that says the name of the god, their descriptions will be displayed. I also want to toggle the themes of my website where by clicking the toggle them button, my whole enter website theme will changed
im kinda strugging with css and whatever background colour im setting it too, the website is not changing so any help with that would be appreciated <3.
here is my base code:
enter image description here
Not much to go on with the code however I could give some advice on how I would go about doing it. I would go about implementing this:
<div>
<img src='image.png'>
<p class='hidden'> this is the description </p>
<button>Show/Hide description </button>
</div>
You will have each image with its own description and button in a div and the description will be hidden by default. Add a event listener to the button so onclick it will add/remove the hidden class to show/hide the description.
Related
I am using the "Wordpress Carousel Pro" plugin on my Wordpress site. That plugin uses the code from "Magnific Popup" to display a pop-up when you click an image. You can add text to the caption of an image and that text will be displayed on the popup but the caption doesn't take HTML it shows no HTML that I added
Link Button
Does anyone know why this happens? You can see what happens on this page https://videosafari.nl/tv/ on the first image of the first row I added a HTML button to the caption and you see things dont look good at all.
Apart from that I did manage to add this successfully.
<button>Default Button</button>
But when I want to add a link to that
<button onclick="window.location.href = 'https://w3docs.com';">Default</button>
It will not look like a button anymore and the result will be the same as with a normal button. (the first example). Does anyone know why this happens? Thank you in advance.
Regard,
Dean.
https://videosafari.nl/tv/
https://shapedplugin.com/plugin/wordpress-carousel-pro/
https://dimsemenov.com/plugins/magnific-popup/
I have a div for the header, and then I have 4 divs nested inside of it for:
A Logo of the Brand
The Menu
Social Media Logo #1
Social Media Logo #2
Now I'm trying to link the logo to the homepage, and the social media logos to the corresponding profiles.
The problem is that the image doesn't show up. When I delete the the image link from HTML code and put it inside of CSS of that div it does show the image but it's still not clickable.
HTML:
<a href="">
<div id="fb">
<img src="face.png"/>
</div>
</a>
CSS:
#fb {
float:right;
width:90px;
height:90px;
margin:20px;
}
EDIT: Sorry if I did anything wrong. Im new here and Im learning to code.
EDIT #2: Formating
I'm unable to comment as I've rarely used this account, but the html you have above should work as is. What is currently being shown in your browser window?
For future reference, these types of posts are well received here. You've not included specifically what the problem is, or what you've tried to fix it, or even what is being shown. Not trying to be rude, just speaking from experience.
Look, we can make link on our page with this symbol # as I remember or we can just add name of our page.
If you want to make clickable only image we can make it in this way
<img src="pass to your image" />
If you want to create button with image we can add properties to element a, code is above, width and height to our element a and make the image in the center of our "button" in real it will be a e
lement.
Or we can create element button and put inside of him image. And style button with height and width. Here is code
<button onclick="location.href='link to another website'"><img src="pass to image" /></button>
If your image didn't visible. It can be mistake in your path to your image from html file, try to use ../ to return to previous folder. Use developer tools in Chrome. And in tab Console you will see your error why is it didn't show.
If you want to make a image that is also a link, wrap the image in an a tag this you can wrap in a div.
<div>
<img src="your_image_path" alt="alt_name">
</div>
I have the following image of a trophy on my main page and I would like to make a small description appear when a user hovers over it just as on this site. When I hover over the icons on the top right, I can see some description. Is this done through onclick? It looks neater than just having a paragraph description....
It would be done using onMouseOver to call the function to display or update the element that shows the description. See below example
<a href='link.html' onMouseOver='showDescription();'><img src='icon.png'></a>
Hope this helps
You can do this with the title attribute.
<img src="https://unsplash.it/50" title="some text">
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
I am looking for the code to make this image http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg hover over this one http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg on a mouse over.
I am trying to link these to http://www.ciob-online-documents.co.uk/AnnualReview2010
Thanks for your help
P.S I have looked everywhere and tried all sorts of examples.
I am using a Drupal WYSIWYG editor in rich text.
Try to open HTML mode in your Drupal WYSIWYG editor. The code for changing an image on hover could be the following:
<a href="http://www.ciob-online-documents.co.uk/AnnualReview2010" title="">
<img src="http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg" alt="" onmouseover="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20roll%20over.jpg';" onmouseout="this.src='http://www.ciob.org.uk/sites/ciob.org.uk/files/images/annual%20review%202010.jpg'" />
</a>
So, when a user is going mouseover image element, it's src attribute will be changed to your second image. As soon as user mouseout src of the image will change again.
A link on the top of the image, is going to turn user to a page you mentioned onclick.