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.
Related
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.
I'm not good enough in JavaScript/jQuery to make my own gallery or modify an existing one. I'm using UniteGallery script which provide a nice looking tiles style gallery.
The problem is that I wanted a link to be displayed when the image is zoomed. And the only diplayed text when the image is clicked on, is the alt attribute.
So I'm wondering if I can put an <a> tag inside the alt attribute of the image. I know it's not what alt attribute should be for, but W3C validator doesn't seem to mind about that.
<img alt="Image 1 Title <a class='button' href='project1.html' target='_blank'>More</a>"
src="img/gallery/thumbs/image1.png" data-image="img/gallery/image1HD.png" data-description="Image 1 Description"/>
Do you think that's ok? (I don't even know what the data-description is used for in unitegallery.) If you got any other solution, I'll be glad to read it.
I would like to add a picture in my code that is not from my computer, but from the web. Let's say that the link of the image is "www.image.test", how would the code be written? And, what if I want to hide a link behind that image?
Simple. The code would look like this. The <a href> will add a link to the image when clicked on, and the <img> tag will add the image from the appropriate image URL that you would specify.
<img src="http://www.image.test">
during page transition am using gif image to represent as 'loader' .But first 2 or 3 navigation i can see the image and rest of the transition instead of image am only able to see the "alt" text i have give with blank imagebox.
I think the image is not loading,please check my code
<div id="loadinggif" class="overlay" align="center" style="display:none;">
<img src="img/gif.gif" alt="loader" height="50" width="50">
</div>
and when i click one page navigation am using following code
$('#loadinggif').css('display','block');
Please check my screen shots first one is working perfectly ,second screnshots showing the exact problem am facing now.
Are your 'pages' in the same file/location? Make sure the relative path to your image is correct everywhere you use it.
Another thing would be to clear your browser cache.
If you still cannot get it to work, I would suggest inspecting it when it doesn't load, and looking at the browser's console. Depends on the browser, but most you can right click the image then 'inspect element', or something very similar.
Try to fully qualify the image. Such as https://mywebsite.com/img/spinner.gif. Now, if that fails, do not give up on life, there is still hope! What I normally do, is have a div with a css/Less class that has the image in it. That way, the image is loading through the dom, and to hide n show, simply hide n show the dom element with that specific class.
Let me know if that works.
Cheers M8.
To display a hint when my user hovers his mouse over an image
<img src="image" alt="product code 000000">
However, the default alt text always displays on the right of my cursor.
Is there any way I can move the displayed mini popup to the left of the mouse cursor ???
Update Thank you everyone for your replies.
You mean the yellow tooltip ? You can't. But you can make your own using JavaScript.
The tooltip is the Title element, the alt is the text that appears when the image is not visible. You cannot format the title element, however as has been mentioned you can add in a custom tooltip. I like using the jquery UI tooltips which are easy to get working for a start.
Then you would be able to change the CSS to move it over to the left.
There are tons of javascript tooltip scripts around that can do that for you. By the way, in most browsers the tooltip displays on title="" attribute, not alt.
No, you can't but you can create your own using css and/or javascript.
you could create a toolbox in css
img{position:relative;}
img:hover::before{
content:attr(alt);
position:absolute;
left:0;
top:0;
}
http://www.w3.org/TR/WCAG10-CSS-TECHS/#Alt