I realize that this is probably an "old school" way of doing this, but I finally got my gallery to work with one exception. If the gallery is located lower on the page, the "#" link on the thumbnails causes the page to jump the top. Is there a better way to create this gallery?
http://pacmill.bigrigmedia.com/cms/portfolio-detail-test3.html
Thanks in advance!
Adding a return false will usually stop the page from jumping to the top when clicking on a # link.
<img src="..." />
For your problem, I would go with Shawn's solution and just use CSS. So delete all of the links around the images and add this to your document:
<style> img{cursor:pointer;} #Display{cursor:auto;} </style>
The second entry (#Display) is to make sure your main image does not get the pointer cursor. It would be better to just drop a class on each of your images and then assign the cursor to images with that class. That would look like so:
<style> img.myImage{cursor:pointer;} </style>
<img class="myImage" src="...">
I'm guessing you're using the anchor tag in order to get the hand icon on hover. You could get the same effect by using CSS.
style="cursor: hand;"
This should create the same effect and avoid the problem of the anchor tag.
I strongly suggest you to don't use an anchor tag for that. JavaScript events can be added to any DOM element, just like in:
<li class="click-to-expand">
<img src="..." />
</li>
And also, as some users already replied, you can use CSS pointer property to indicate a possible user interaction when hovering the clickable interface item.
.click-to-expand{
cursor:pointer;
}
Remember to keep it accessible by providing a valid URL to access the content in case it's necessary (no javascript fallback).
Related
I'd like to display a thumbnail in a popover when I hover over text (a camera emoji) in our Django Admin view. The code I have works, but displays the image inline, which disrupts the rest of the layout of the site
I'm by no means a Django expert, so there might be something easy I'm missing. I'm totally open to using other libraries to help if that's the best path forward, but am not sure of how to appropriately load them in to django admin. I'm also open to pure js/css solutions - whatever works best!
Here's the code that I have
def image_column(self, obj):
format_html(foo + " " + \
'''<a href="{}"" target="_blank"
style="font-size: 18pt"
onmouseover="document.getElementById('{}_img').style.display='block';"
onmouseout="document.getElementById('{}_img').style.display='none';">📷
<img id="{}_img" style="display:none" src="{}" />'''.format(img_url, img_id, img_id, img_id, img_url)
I'd love any thoughts or suggestions on the best way to make it 'popover' instead of display inline. Thank you!!
EDIT:
Things are working now, with the exception of the camera emoji displaying over the pop over. The image in the background is a map (which should be on top). The camera image is from the row beneath it
That might only be an issue to do with the position property of the image, if it is position: relative, then it will fix itself among the other elements, you have to set it to position: absolute and from here you should give it top and left, for example: top: 0px; left: 0px; relative to the parent element which I guess is the <a> element ... And you should also apply position: relative to the parent element: which again I think is <a> or whichever parent element is to the <img> element
I have a banner, and it's a certain size. It has decorations on it.
I also have my whole website style sheet based on percentages on the page. I want to keep it this way.
However, is there a way to dynamically resize my banner image? So if I shrink the webpage down, it does not omit any part of the banner?
Hi is very simple without jquery you can do this only css
i give you code
css part
.imgresize{
width:50%;
}
.imgtag{
width:100%;
}
html part
<div class="imgresize">
<img src="https://www.google.pt/images/srpr/logo3w.png" alt="google" class="imgtag" />
</div>
and live demo now click here
http://jsfiddle.net/rohitazad/aJdmu/1/
Your question is kind of blurry, but to resize properly an image you can play on the width or the height value (or both) of an
<img width="width_value" src="img_src" />
tag for example. The browser will keep the proportions of the image if you only change one attribute. Changing these values using Javascript is easy and this should not alter your layout.
I was watching a Video tutorial according to the author CODE #2 should be used, but instead I changed it a little bit to CODE #1
So whats the difference in both of codes ,both perform the same tasks ,any technical or good practice here ?
CODE #1:
Used eventhandlers MouseOver and MouseOutof of tag
<a href="http://www.google.com" >
<img alt="arrow" name="ArrowImage"
onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
src="Images/arrow_off.gif" />
</a>
CODE #2:
Used eventhandlers MouseOver and MouseOut of tag
<a href="http://www.google.com"
onmouseover="document.arrow.src='images/arrow_on.gif'"
onmouseout="document.arrow.src='images/arrow_off.gif'">
<img src="images/arrow_off.gif" width="147" height="82"
name="arrow" alt="arrow" />
</a>
If there's no formatting or additional content inside <a>, you can use either and it won't make a difference.
If there is CSS formatting or additional content within the link, the boundary of the <a> might differ from the boundary of the img. In this case it depends on the actual intent: Do you want to change the image source only when hovering the image or also when hovering the remainder of the link.
But since you're asking for good practice: It is recommended to not use inline JavaScript, i.e. don't mix HTML and JavaScript. When applying good practice you'd probably catch the mouse events in a separate <script> at the bottom of your HTML document or define a style using the CSS :hover pseudo class.
In the first example, the onmouseover and onmouseout events are bound to the <img> tag, so mousing inside the <img> activates them. In the second example, they're bound to the <a> tag in which the <img> is contained.
For your two examples, the result will be identical because the <img> is the only element inside the <a> tag.
However, if more text was included inside the <a> tag and the events bound to the <img> only, the rollover effect wouldn't occur when mousing over the text.
For example:
<a href="http://www.google.com" >
This is some text explaining the image. If you mouse over it, the rollover won't change.
<img alt="arrow" name="ArrowImage"
onmouseover="document.ArrowImage.src='Images/arrow_on.gif'"
onmouseout="document.ArrowImage.src='Images/arrow_off.gif'"
src="Images/arrow_off.gif" />
</a>
<a href="http://www.google.com"
onmouseover="document.arrow.src='images/arrow_on.gif'"
onmouseout="document.arrow.src='images/arrow_off.gif'">
This is some text explaining the image. If you mouse over it, the rollover WILL change.
<img src="images/arrow_off.gif" width="147" height="82"
name="arrow" alt="arrow" />
</a>
Either works fine. It's a matter of what you want to do.
If for instance you had text as well, you'd choose option 2, because the text would be right after <img> and before </a>.
Generally, you want stay away from binding directly to images, because you usually end up wanting to put more things with that image (such as text, or other containers).
It's generally not considered good practice to use 'inline javascript' the way you're doing here. This makes code very difficult to read and and less maintainable in the long run. Using unobtrusive javascript defined in a separate javascript file is the way to go. An example of that using jquery would be:
// defined in application.js for example:
$("img").hover(function onmouseover(){
$(this).attr("src", "Images/arrow_on.gif");
}, function onomouseout(){
$(this).attr("src", "Images/arrow_off.gif");
});
As far as the differences between the two approaches, the only difference is at what point the events get triggered. The first one causes the events to be triggered when the user mouses over the image, and the second one occurs when the user mouses over the anchor. The anchor, depending on it styles, could occupy a larger area than the image itself, so choosing between the two depends on the effect you want to produce.
As far as 'good practices', this example is really a bad usage of javascript, in other words you can accomplish the same thing using CSS Sprites.
For example, CSS:
/* use a more specific selector in your actual code */
a {
/* on state */
background: url(Images/arrow.gif) no-repeat 0 0;
}
a:hover {
/* default state */
background: url(Images/arrow.gif) no-repeat -50px 0;
}
Was the video from 1992?
You can achieve rollover effects with CSS alone, which is considerably better, e.g.
a#rollover {
background: url("normal.jpg") no-repeat 0 0;
}
a#rollover:hover {
background: url("rollover.jpg") no-repeat 0 0;
}
Better still, you can have both states as a single image, and just change the background position on hover, as described here.
If you want to use JavaScript to change an image source, then a) use unobtrusive JavaScript, and b) use jQuery for added simplicity.
First, roll over images are typically accomplished with CSS
See devdigital's answer for an example.
Second, if you are going to use JavaScript in the way you have in your code see Michael's example
Third, I would like to note that the attribute "name" is not a valid attribute for either of those elements in HTML5 and not at all (Read: HTML4) for the img element.
Finally, a preferred way to do this with with JS would be something like this:
HTML:
<a id="rollover" href="link.html"><img id="rolloverimage" src="image.jpg" width="100" height="100" alt="text"/></a>
JS:
var atag = document.getElementById('rollover');
atag.onmouseover = function() {
document.getElementById('rolloverimage').src = 'rollover.jpg';
}
atag.onmouseout = function() {
document.getElementById('rolloverimage').src = 'image.jpg';
}
When I search images using Bing.com, I realize their images are well cropped and sorted. When you place your mouse on an image, another window will pop up with an enlarged image.
http://www.bing.com/images/search?q=Heros&FORM=BIFD#
I want to do the same thing in my program. I checked the source code of their page. They are using javascript, but still I have no clue how they make it. Does anyone familiar with it? Any suggestion is welcomed.
If you look at the HTML, you'll see a span immediately above each of the images. It sets that frame's display style from "none" to "block". It then uses an animation library to resize the content of the covering frame.
It's the same image. It just enlarges it slightly.
Here's a simple HTML/CSS/Javascript example on changing the display property of an element with javascript:
HTML:
<div id="image1" class="image" onmouseover="showImg(1);">
Here's the small image
</div>
<div id="bigImage1" class="bigImage" onmouseout"hideImg(1);">
Here's the enlarged image and info about the picture
</div>
Javascript:
function showImg(num){
document.getElementById('bigImage' + num).style.display='block';
}
function hideImg(num){
document.getElementById('bigImage' + num).style.display='none';
}
CSS:
.bigImage{
display:none
}
They also use a fancy transition thing like scriptaculous's effect-grow found here.
I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>