JQuery :: Display Captions Based On Mouseover Of A Certain Part Of An Image?
Jan 28, 2011
I have an interesting project that I'm sure someone has done before. I need to essentially recreate the effect on the Bing homepage where you can mouseover different parts of an image and be displayed different tool tips depending on where your cursor is.
[Code]...
I don't want to use Flash for these things unless I absolutely have to. It seems they could be done with CSS purely but I was wondering if there is a more attractive/prettier way to do it with Jquery?
View 1 Replies
ADVERTISEMENT
Apr 9, 2006
I used this script and it is working fine. I changed those two images and put my own. Image1 is of 600 width and 340 height and Image2 is of 560 width and 794 height.
The code is working fine but the tool tip window resizes automatically
and shows up the image. How can I have a fixed height and width? Which
line should I change so that the height and width of the tooltip window
is constant?
I tried changing var tipWidth = 160; but no effect tried playing with var startStr = '<table width="' + tipWidth + '"><tr> but again no effect.
I want the tooltip window to be constant and the picture size should be resized to fit in that tooltip window and aspect ratio for height and width should be resized automatically.
View 9 Replies
View Related
Dec 6, 2010
I am using the Cycle plugin to handle a slideshow and I have a long caption that I would rather not put in an ALT tag. Is there any other way to display captions using the Cycle plugin? Such as in a paragraph tag?
[Code]...
View 4 Replies
View Related
Sep 23, 2009
I am new to JavaScript and I am having a difficult time finding what I thought would be easy to find.I have 4 text strings that when a user runs his/her mouseOver, I'd like to display a corresponding picture in a display area. I thought that would be easy enough. However, it gets a bit complicated for me since I am also using CSS to position the display area. For some reason all I can find out there are examples using HTML tables for display image positioning. I don't want to use tables. I'm not sure if this will make a difference but my style sheet is external. Also, the text does not link/go to another page.
View 6 Replies
View Related
Sep 9, 2011
Have two Instances - One will not display captions. Here are the script pieces for the two.
[Code]....
View 1 Replies
View Related
Sep 25, 2010
I'm trying to have the slide move on click but with a counter as well. When I try to incorporate the counter it breaks my test page I'm trying it on. I added captions to the slides and I realize both of them are activated by after.
<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Image Count Demo</title>
[Code].....
View 2 Replies
View Related
Jun 23, 2010
i'm having a small problem with getting the captions to display from a slideshow... i've got multiple slideshows on the page which i guess could be causing the problem... i'm not getting any errors, but no caption is being displayed... here is a section of my html....
<script>
$(document).ready(function() {
$('#cat_slide1').cycle({
fx: 'scrollHorz',
timeout: 0,
next: '#next1', prev: '#prev1',
[Code]...
View 3 Replies
View Related
Sep 21, 2004
I'm using ul, li tags to create drop down menus. The images in my main nav bar change when mousing over the images. When I move the mouse over an image and go down to the links that appear in the drop downs, the image changes back to what it was before I moused over it.
Does anyone know of a javascript that will display the mousoever image in the main nav bar while mousing over the links in the drop-down menu?
View 1 Replies
View Related
Sep 21, 2011
I am trying to use Javascript to display an image based on a value. I have the image positions in my .css. Just to make it easy if my var x=0 i want to call the "position 1" div, or else i want to call the "position 2" div. How can i make this possible. I have positions because i have a background image and i want the different pictures to be in a different location on the background based on the value. Below is my code that
layout.css
#layout {
position: relative;
top:0%;
z-inderx:-1;
}
#date {
position: absolute;
top:5%;
left: 50%;
[Code]....
View 6 Replies
View Related
Feb 4, 2011
I have been using Flash to create a slide show that starts with a single image. Then the image caption slides up from the bottom followed by a longer description coming in from the right side of the image (which includes links in the text). The description and caption then slide away, and a new image is transitioned into the old image's place. Is it possible to create something like this with jQuery? The s3slider jQuery plugin is very similar to what I'm looking for, but I can't seem to get two captions to appear over the same image.
View 1 Replies
View Related
Apr 13, 2011
Here is my code:
Code:
if (!goBook)
{
if (V == "*")[code]....
What I am trying to do is display a different image for each car type in the loop (eg carpic1, carpic2, carpic3 etc).
View 1 Replies
View Related
Apr 24, 2009
For simplicity and debugging, I attempt to display an apple when the mouse passes over the center of an image.In IE, the mouseover hand shows as the mouse passes over the center of the image and the apple is displayed.In FF, the mouseover hand shows as the mouse passes over the center of the image but the apple does not display.(By the way, I'm certain the showhide function is fine,
<div id="Core" style="position:absolute; width:209px; height:115px; z-index:4; top:212px; left:28px; visibility: hidden"><font color="#000000"><img src="apple.jpg" width="125" height="140"></font></div>[code]....
View 3 Replies
View Related
Jul 24, 2010
At the moment, the script creates a gallery with thumbnails from a list of images (from my basic understanding), and I want to add to it so the current code also picks up the text from the alt tag and displays that within a div box positioned absolutely elsewhere on the page, when the main image is displayed.Here is the javascript:
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return
[code]....
View 2 Replies
View Related
Dec 23, 2009
I'm trying to setup and image slideshow with captions. I can't it to work so far.
Here is a code snippet:
Javascript
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = '1.gif'
Pic[1] = '2.gif'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
Html
<body topmargin="5" leftmargin="0" marginheight="0" marginwidth="0" onload="runSlideShow()">
<img id="picture" name="SlideShow" src="1.gif" alt="" width="350" height="195" border="0" align="middle" />
View 7 Replies
View Related
Jun 23, 2011
I have yet to be able to do this successfully. I am using the Cycle Plugin to cycle through a series of images and corresponding caption. To show the images, I use:
<div id="cycle-container">
<?php query_posts("cat=38&showposts=2"); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<img src="http://www.website.com/uploads/<?php echo get_post_meta($post->ID, 'Image', true); ?>" alt="Icon [Code]...
Problem: The captions do not effectively cycle. What appears is the first caption from php the_excerpt but it does not change to the next php the_excerpt text. Can I solve this problem so I get the text from php the_excerpt to correspond to each image??
View 1 Replies
View Related
Aug 20, 2010
I've got a simple javascript image gallery I'm using, but I was wondering if it would be possible to use HTML in the description area. Basically I want to be able to create paragraphs, bold text, and links in the description area. Is it possible? Here's what I'm using:
<script type="text/javascript" language="javascript">
function showPic (whichpic) {
if (document.getElementById) {
document.getElementById('placeholder')
.src = whichpic.href;
if (whichpic.title) {
document.getElementById('desc')
.childNodes[0].nodeValue = whichpic.title;
} else {
document.getElementById('desc')
.childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
}
return false;
} else {
return true;
}}
</script>
Then the markup:
<img id="placeholder" src="images/twoBottles.jpg" alt="" /> (Where the image appears)
<p id="desc">Choose an image to begin</p> (Where the image descriptions appear)
<a onclick="return showPic(this)" href="images/condiments.jpg" title="The description which in some cases is 2 or 3 paragraphs long and I would like to format somehow">two bottles</a> (clicking this text opens that picture in the image area).
View 4 Replies
View Related
Mar 13, 2006
I have a form with a drop down list box, few textboxes with labels and submit button. depending upon my selection I should be able to show hide textbox; assume items, 1,3,5 in the selection box shows the items other than the listbox and 2,4,6 items in the selction box if selected hides the labels and textboxes. but in all the case submit button should be present.
View 6 Replies
View Related
Sep 12, 2002
how would i build a multidimensional array? would it be: PHP Code:
var rinksAndPriceArray = new Array();
rinksAndPriceArray[0] = new Array();
rinksAndPriceArray[1] = new Array();
i've figured that out so far.
now, i want to be able to access a part of one of the arrays based on a variable that is passed into the function
the variable i'll send in will be the first part of the array ex: rinksAndPriceArray[0][0] and i'll want to return the rinksAndPriceArray[0][1] value.
View 3 Replies
View Related
Nov 27, 2011
I have an image insertion page that is part of a JS WYSIWYG. It works okay, but I would like to add a styled caption bar underneath it.
This is what I'm currently using for the caption (inserted by a button):
Code:
This is the code from the insert image page:
Code:
How do I put the caption bar after the image in the main code?
View 1 Replies
View Related
Oct 6, 2010
I am trying to make a generic function called whenever the window size changes. I want this function to apply to several different images. The idea is that when the window is resized the function will only change the end of the source code by replacing "_small", "_medium", "_large" with the appropriate size depending on the window. The problem is that when I use the code below it makes ALL of the images the same. The variable imageRightIdStr genereates a list of ids of all of the images that I would like this function to affect. ex: #imageRight101,#imageRight201,#imageRight202,#imageRight203,#imageRight301 etc.
Here is the code that I have now. It mostly works except it makes all of my "imageRight_" images the same.
var contentwidth = $('#background').width();
if ((contentwidth) < '1175') {
var logo= $('#pageLogo');
var rightImage = $('.rightImage');
logo.attr('src',logo.attr('src').replace('_large','_small'));
logo.attr('src',logo.attr('src').replace('_medium','_small'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_large','_small'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_medium','_small'));
}else if ((contentwidth) < '1440' && (contentwidth) > '1175') {
var logo= $('#pageLogo');
var rightImage = $('.rightImage');
logo.attr('src',logo.attr('src').replace('_large','_medium'));
logo.attr('src',logo.attr('src').replace('_small','_medium'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_large','_medium'));
$(imageRightIdStr).attr('src',$(imageRightIdStr).attr('src').replace('_small','_medium'));
}
View 3 Replies
View Related
May 25, 2009
I'd like to display the children nodes when the mouse over the parent node. What is the best way to achieve that?
View 4 Replies
View Related
Dec 18, 2007
I have divs that contain html text. What I need is when I move mouse over that div link is displayed to edit content.
I have such code:
$J('div.editable_content').mouseover(function(event) {
$J(event.target).css("border", "1px solid black");
$J('div.content_edit', event.target).show();
return true;
}).mouseout(function(event) {
$J(event.target).css("border", "0px");
setTimeout(function(){
$J('div.content_edit', event.target).hide();
}, 2000);
return true;
});
But the problem is that if I move mouse on content that is inside this div (for example image) than mouseout event is triggered. One solution would be adding this event to all elements inside that div. What selector should I use to select all elements inside div ("div.editable_content *" and "div.editable_content > *" does not seem to work for this problem)? Any better solutions how to do this without attaching events to all elements?
View 1 Replies
View Related
Oct 16, 2010
A plug-in that shows only a part of the image and not the whole image.
To be clear, I don't need resizing, just sectional viewing.
I have large images of map/newspaper, but I only want to center to a position and show a part of the image, how can I do that.
I have looked at a couple of the pop-up plug-ins and they don't do that. Also, I don't need pop up functionality.
For e.g. only show a specific part of map, or a newspaper.
View 1 Replies
View Related
Apr 6, 2011
I have an oscommerce web site with a cart in the header which shows/hides the content when you hover over it. What I'm trying to do is alternate the row color of the part that drops down when items have been added to the cart but I'm just not getting it right no matter what I try.
Code JavaScript:
$(function(){ // wait for the document to load
var globals = {
session_id:session_id,
cart_fetch_file:"cart_fetch.php?" + session_id ,
cart_fetch: false,
loading_image: '<center><img src="images/assets/loading.gif" align="middle" vspace="8" alt=""></center>',
cart_image_width: image_width,
cart_image_height: image_height,
cart_opacity: 1,
box_status: false,
timer: "",
speed: "fast",
text_cart_quantity: text_cart_quantity,
text_cart_subtotal: text_cart_subtotal, .....
View 2 Replies
View Related
Sep 19, 2010
I am using wordpress for my site and I would like to display images of my jewelry based on tags.I have 160 images total. Different kind of material, color, shape and type. . I want to have a default image load first when you arrive on the page, then that image will get updated based on what tag you select. Like with color, there is black, white, red and green. For type it's necklaces and earrings. So I would have the same necklace, but there is a black and a green version for example.So say by default I have a black necklace that loads when you go to this page.If you press the green tab, then I need to fetch that same necklace in green. I have my tags set up right, I just need to be able to call up the correct image.Ideally I would like to have an image in the middle of the page, with icons of options on the above, to the left, right, and below the image.
View 1 Replies
View Related
Oct 27, 2009
I have gotten my script to do exactly what I want it to do with one exception. I have some thumbnail images that people can mouse over and the actual image is 100px by 75px. That is what I use for my thumbnail and they reside in www.website.com/images/thumbs/image1.jpg. I have the large version of the image that resides in www.website.com/images/image1.jpg. Its actual size is 640px by 480. When I mouse over my thumbnail, I don't want the thumbnail to appear for the larger image, I want the large image to appear instead? Let me know if you need ellaboration.
Javascript
<script language="JavaScript">
function Change_Big_One(thumb){
document.getElementById('BigOne').src=thumb.src.replace("_th","")
[Code].....
View 4 Replies
View Related
