Currently, in html, for images, we have attributes like: [alt,align,border,crossorigin,height,hspace,ismap,longdesc,src,usemap,vspace,width].
Source: HTML img tag. I was thinking about embedding photo tagging feature in html-level support itself. Like, for example, currently, in the context of Facebook website, images can be tagged. What if, there are zillions of images outside of facebook and there is a need for tagging for photos? Can anyone share pointers to start in this direction? This idea occurred when I was browsing this link: 76 Powerful Thoughts from Paul Graham and I hovered my mouse over the first pic in the link. If you hover mouse over any face, it shows: Paul Graham. But I was interested in knowing, who were the other people in the same photo. As of now, I don't have ideas how to get started on this. Can anyone share their thoughts?. Thanks.
Related
Full Disclosure, talk to me like I am stupid because, well, I kinda need to be guided.
I would like to create a series of web pages where the user would hear a sound when they would click on links whether it be photos or text links it doesn't really matter. The idea here is to generate an audio sound when a link is clicked. And I want that to be able to span across all clickable links in the HTML document. I am not sure how to do it and I'm not asking Google the right question because I'm learning how to do sounds for every other possible aspect of web development rather than this specific need. Might be because I haven't slept in 24 hours but I'm trying to create the Kobayashi Maru and it would be really cool if I could make the lcars computer sound effects.
So how can I make all the links play the same sound or ideally I'd like to be able to make sounds for active links and then a different sound for non active links but I would just settle for one sound effect right now. Could anybody please help me out?
I've tried various scripts but they are for specific objects
Has anyone got any idea on how to implement this carousel into my website? I am using WordPress and I am not sure how to go about this. I was told to use 'foo gallery' to achieve the same look however, it doesn't really feel the same and also didn't work on my site (for some reason).
I have tried to code some of this but I am awful at coding and I am mainly just spending my time watching youtube help videos if I am being honest!
I'll explain my neeed for this and what I would like it to do and then, if you could help me that would be great!
So like on reddit, I would like to implement this feature on my home screen to show off some of the 'Hot topics of the day'. Preferably, some code could automatically update the images and text each day depending on the comments/views left on a page - so the top 4 most viewed pages would be automatically added to the front page with a custom image (which I have created). However, that seems quite hard. So just the layout/template of the images (like the photo provided) AND there is a way for me to manually change the images and names each day would suffice. I would also like to have 4 photos which also act as buttons with the curved boarders.(again, like the image I have attached)
Just so it's clear, I do not want these images to be able to move off like a slideshow, I just want them to stay in place and be able to change either manually or automatically.
Maybe this is called something other than a carousel and would be easy to do... i dont know! So if you do, please let me know.
Furthermore, I appreciate this is a place mainly for code to be posted however, I won't post my code as it is useless! If anyone wants to share any code or contact me privately then that would be very much appreciated.
Thank you
I created a new webpage that has a blog. How can I get an appealing preview of the website as I see when I share links from NY Times and other sites? This is my site www.denisejames.dev This is the current view
I would like to add a picture and a title.
I am told that this is a duplicate answer even though I did not mention facebook at all and the recommended answer is only for facebook. The answer helps to let me know, the preview is different for each app I post a link into. Hopefully this will help others using preview for the first time. I see previews in twitter, what app. I was not aware they are different for each app for the same link.
I assume you are sharing your website on Facebook. When you share a link on Facebook you will get a preview of the image that the website has in the top menu. You have a title on the top part of your website, but The New York Times has a svg instead. Svg is Scalable Vector Graphics, so it's a graphic symbol. Once you replace that text you have (Denise James) with an image, a gif, a svg element or something similar, you'll have the preview too.
I have a basic idea for an image of a human being, where the user can hover their mouse over different areas of the image (for example, over the feet, or the lumbar spine) which will activate code that can display information on various clinical conditions pertinent to the 'hovered' area. I appreciate this is a very basic question, but what is the best and simplest way to program for this?
You need to use map tag. Draw over the image the different parts, with an id for each one. Then, you can display different info with javascript when user made over a section.
map tag info:
http://www.w3schools.com/tags/tag_map.asp
Assuming there is no og:image or link rel img_source, does anyone have any real-world experience or advice on better-than-random techniques to choose an image that best represents a web page?
Update: All answers are good, so upvoted them all and selected one, although it seems there is no great way of doing this. I will experiment with largest picture and screenshot of what it would like on a low-res client. Thanks all!
PS: I'm finding that quite a few pages seem to have og:image or link rel img_source anyway. More than I expected
Taking a screenshot of the website in its smallest possible form, how it would look on a notebook laptop or even a mobile (but not the mobile site version), would be a non-random approach.
Most good web designers will try to make sure users are able to see what the page is about immediately upon loading and include the most important and relevant information 'above the fold' as they say.
Choose the logo of your page as the og:image. That way your brand becomes associated with all your posts, without having to worry about what image best defines each individual page.
For other pages, you cannot control what image they have.
You could investigate how sharer.php works but other than that there is no silver bullet as to choose which image for a web page that has no definable image.
I don't have any experience with Facebook opengraph, but one trick I've used before is to grab favicons of sites I've linked to and use them as link button icons... They're small and are usually always associated with the company name and/or logo, and they're pretty universal across most professional websites. And the usually univeral filename favicon.ico makes it really easy to pick out of the html (or the link attributes if they change the filename).
Might give that a shot if that could be adapted into what you are trying to do. If you find that doesn't look too good, you can try a more "web 2.0" take and check for iPhone/iPad button apple-touch-icon png images (probably only find them on big name sites though)http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
I would normally suggest that you simply scrape the page of img tags. However, these days, CSS background images are frequently applied to h1/header/div/a/etc. tags to display logos in place of text.
One possible solution is to grab all elements with 'logo' in their ID/class name:
var l = $('[id*="logo"],[id*="Logo"],[class*="logo"],[class*="Logo"]');
If this is/contains an img tag, chances are you have the site's logo. Otherwise, if it's a div or other such container, you'll need to dig into the child elements' CSS properties to see if they have a background image.
From this you can build a set of candidate images, which when combined with a heuristic based on (for example) image dimensions, should hopefully spit out a logo every time.
I hope this helps you on your way!
Going for the logo is usually the wrong way. Seeing it from a user of your website's point of view I would rather want no image than a logo all the time. This is the same as in Google+ or Facebook links. Only show images when it really does make sense.
However finding the corresponding image may not always be trivial if there is no og:image or rel="image_source" provided.
An article usually has a title which is presented as <h1> or <h2> tag. The nearest image may be the right one. However the nearest may also be a logo so this can go wrong.
I would do that very pragmatic. I would fetch the most likely image first and read the given EXIF data, if this is a real image there are informations provided. If this is just a logo, spacer or some other kind of layout graphic it does not have EXIF data and therefore is not relevant. If the first picture is not the right tough, I would fetch the next one and so on.
Another clue may be the HTML5 <article> tag which usually has the corresponding image to the post nested.
Nevertheless there are several web designer not using standards and their webpage may not be parable nicely.