I am trying to build a page where i am having an image. Now I want to do a task that when ever mouse is taken over a certain part of image , that image with some links popup as a Mouse Hover Functionality.
Like For E.g. I have a map of US(as an Image on my Webpage) , and in that when I take the mouse over its State ( say: Texas) then the image of Texas ( which is embedded as Hyper link ) pops up in larger view and that image have additional links of Cities and user should be able to click those links and can reach the page of that City.
I Hope my Query is Clear.
You can use image maps to break into areas(for eg states). You can some jquery library like maphighlight, to show the hovering effect. And finally since you want to show dynamic content in the pop up boxes, you can create a generic template which gets populated based off the id being passed and then you can make ajax request to that page and pass the id along. Also colorbox(is a type of lightbox) supports image maps, so you can populate it using ajax, just by passing the urul in href tags of each area.
Related
At a page I am showing a Youtube film in a lightbox.
I then want to show only the raw video film - no controls, play/pause buttons, fullscreen option, progress bar etc.
Right now it looks like this:
and I simply need to remove the top and bottom flash bars with icons. I know it slides away while the films is running, but I wish to always have them hidden.
Is this possible to hide from the film?
Update
From the answer from #Sven below I added controls=0&showinfo=0&rel=0 to the URL in the iframe and got the following:
This works fine for the purpose. It seems though that a Youtube logo is visible in the lower right corner instead when this other stuff is removed. This logo is only shown at hover.
Any ideas to hide this last bit?
Depending on how you are inserting the video, there are several configuration options.
https://developers.google.com/youtube/player_parameters
If you insert the link directly as an iframe most of the options work as GET parameters. In your case add controls=0&showinfo=0 to the video url.
I need a way to automatically generate a thumbnail of the target page when the user hover over a URL (hyperlink) on my page.
I've found several examples of people using pre-created .gifs (or other images) to show a thumbnail of the target site while hovering over the link (see example #1), but I need a way to do this dynamically. Is there a way to generate a thumbnail of a page, either on runtime, or an easy way to update the current thumbnail after editing a page?
Simply put; I need to show a thumbnail of the target page when hovering a hyperlink on my page. This thumbnail should not be based on an image that I have to generate myself after each edit, but rather a snapshot of the current page. Much like google does when searching for websites.
Thanks a lot in advance!
Example #1:
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/
Hover your mouse over "Zoka Coffee"..
Try to study about this library html2canvas
I'm building a chart populated from the database. Now, I wanted to click each point to drill down some information to users. I don't know how to integrate image mapping to each element of the chart dynamically created on the fly. Can you please provide as sample codes, links or articles regarding this subject. Thanks and more power to SO.
Client-side image maps are basically set areas overlayed on an image configured to be click-able links. The links can either be javascript or point to other pages. The area shape options are rectangle (rect), circle (circle), and polygon (poly), and you can set the area dimensions and locations relative to spots on the image. The link above shows examples. When you build the image map from server side script, you'd have full control over the areas (perhaps an entire bar) and their associated links (perhaps leading to a query script with the ID number of the label attached).
Basically, you have to build the chart twice in your scripts: 1st script building and serving the image, 2nd script (the main html view) building a matching map with set of coordinates to fit over the image.
You might also be interested in Server-side image maps. When you set an IMG element property of ismap and wrap the image element in a clickable hyperlink, it allows it so the user can click anywhere on the image, and the coordinates of where they clicked (x,y) will be automatically sent as extra GET parameters along with the hyperlink. On the server side script, look for the $_GET key that looks like coordinates (IE the keyname will be "355,71" if the client clicked on x355, y71 on the image). You'd then translate these numbers to areas on the dynamic chart.
I'm using WordPress as my CMS and I just downloaded a Lightbox plugin for a photo gallery on one of my pages. It works exactly how I want it to, except for one thing.
After clicking on a thumbnail to get the photo enlarged with a lightbox effect, I want to be able to click on a link to take me to the main article where that picture is from.
I've tried a few ways but the issue which arises is that I can't pass < ?php the_permalink(); ?> through a JavaScript function. How would I go about to accomplish this?
Thanks to anyone who can help!
The only way to do it is have the image link go to some inline content, which contains the image wrapped in the this is the only way. The lightbox website will have examples of linking inline content, but for every image you will need to generate the inline content, this is the limitations of using a plugin.
If I were in your shoes, I would write a custom modal function, which would take the permalink from an attribute of the image (rel, title, class) and display the larger image linked to the permalink. I am sure you can find a custom modal tutorial, but basically you create a box in your css, which is set to display:none, then when your link(s) is/are clicked, you use jQuery to append one of the boxes to body, append your content into the box, then display it in the center of the screen, using absolute positioning, and opaque to dull everything else.
hey guys i want to create one display form in which at the bottom images with some text are display in a sliding format.
And when user take mouse pointer onto image that time at the top that image look bigger compare to bottom image.& with image some text also appear with "readmore" button.
when you click "readmore" then it redirect to other page which have full info about selected content.
for clear view what i said visit www.yahoo.com
i want to create some like that for displaying news with pics.
Pratickg88: This is what I used in a similar project:
jCarousel combined with jQuery 1.4.2.
Then I did something rolling my own Carousel class in another project:
http://www.phpexperts.pro/demos/graph_sort/
JavaScript source code for that widget.