Jquery :: Regex - Replace The Src Of An Image When The User Hovers Over It
Jun 29, 2010
I am writing a script that will replace the src of an image when the user hovers over it. I am using jquery and regex to accomplish this and have tested it on my local server but the src of the images on the live server is different and uses a non-relative path.
Here is my code
$(document).ready(function() {
$("img.imagefield").mouseover(function() {
var regex = "^(http|https|ftp)://[a-zA-Z0-9-.]+.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/sites/all/files/[a-zA-Z]*";
var src = $(this).attr("src").match(regex) + "_silly";
[Code]...
View 4 Replies
ADVERTISEMENT
Feb 23, 2010
I am creating a grid of thumbnails. When a user hovers over a thumbnail, the image enlarges. The *trick* is, I want the "active area" to only be the size of the thumbnail. That is, the thumbnails are 180x120, and when the mouse leaves that area, I want the large image to shrink back to normal size.
I have a working demo here:[url]
The way I accomplished this feels hacky though, and I's like to know if there's a simpler/more elegant way to accomplish it. The thumbs are an unordered list of images.
Here is my javascript:
In essence, I add an overlay div over each thumbnail which acts as the trigger to shrink the enlarged image. I thought I could use the parent <li>, as it doesn't appear to expand with the image (since I've set its size in my CSS) but that didn't work.
View 4 Replies
View Related
Mar 10, 2011
I'm trying to create a function to show a custom message as a tooltip when a user hovers over a table row.
My tr tag looks like this
The javascript function looks like this:
jQuery seems to be loaded correctly, as I get the alert. I don't get the tooltip, however.
What I'm trying to do, in case this is totally retarded and impossible to see, is to hover a tooltip over the clicked row instead of passing it in as a variable.
View 8 Replies
View Related
Mar 23, 2010
Is it possible to play a small sound clip when the user hovers over a link? Usually the company I work for would use flash to do this but we have been asked to create it in HTML/JavaScript.
View 4 Replies
View Related
Mar 20, 2007
I have a little Ajax script and I'm trying to remove some CSS elements from a DIV tag and I'm have a bit of trouble with the Regex. Right now I'm trying to remove the z-index attribute. It can look something like any of these:
z-index: 1000;
z-index: 0;
z-index: 75;
etc...
Here's what I'm using right now:
document.getElementById('right_column').innerHTML.replace(/z-index: [0-9]; /gi, "replaced"));
It replaces z-index: 0; just fine but I can't find the correct modifiers to make it work for 2, 3 or 4 digit z-indexes.
View 2 Replies
View Related
Feb 17, 2006
What is the best way to white list a set of allowable characters using
regex or replace? I understand it is safer to whitelist than to
blacklist, but am not sure how to go about it.
View 4 Replies
View Related
Jan 10, 2010
Working with TinyMCE to enable editor to toggle off html mode, what I'm struggling with is converting list items into asterisks [code]...
View 4 Replies
View Related
Feb 13, 2010
I would like to play a .wav sound file when someone hovers their mouse/pointer over an image. I am running a Linux OS.
View 2 Replies
View Related
Jun 15, 2011
Is there a way to make one regex to replace a space with " " and a tab with " "?
Currently I'm using two regex's with string.replace( ... ).replace( ... ), but that means it has to run through the string twice. Any way to do what I want in one regex?
View 4 Replies
View Related
Sep 5, 2009
I am trying to replace the entire page when the user selects adifferent option in a combo box. The code I have works for the firstiteration. However, It fails everytime there after.I went throughfirebug and it appears after the first refresh it never triggers theready() method.My Code is,
<script type="text/javascript">
$(document).ready(function() {
$("#id_company").change(function () {
[code]....
View 1 Replies
View Related
Jan 5, 2009
I've made a vertical css menu from a list, and 1 of those list items has a ul as it's list item, with several items within it.When the parent li is hovered over I've set it so that the child ul and it's li's to drop down below it.I want to use jquery to adjust this child ul so that display is set to none, but I can't seem to work it out (Other than just giving the ul it's own class or ID, but I'd rather learn how to do it another way).Here's the jquery I've got that theoretically should work (but doesn't):
[javascript]
$(document).ready(function(){
$('#sidebar1 > li:hover > ul').css('display','none');
[code]....
I think the problem lie in the li:hover part of the jquery, I'm guessing that it's not allowed, or simply doesn't work that way. I want jquery to set the display of that sub ul to none, then set a click or hover effect on it so it slides down in a fancy way.
View 7 Replies
View Related
Feb 2, 2010
I want to have a big image and say 5 small thumbnails underneath. When the user clicks a thumbnail, the image loads where the previous big image was. Is there a standard way to do this?
View 3 Replies
View Related
Aug 29, 2010
Im trying to have a click event that replaces an image on the page with a new image that has been selected randomly from an array. I have solved PART of this already (can get the random image to appear).
However, instead of appearing on the page where the old image was, the new image appears in a blank page.
My research indicates that this blank page location-problem is a result of using document.write in the Function. Therefore, I know I need to find a different way to accomplish this, but am failing miserably.
I have been trying for hours and hours and HOURS to figure out proper syntax for accomplishing this via elements, functions, variables and mootools.
A bit of my research:
-I found this---but havent figured out how to implement it in my scenario:
Source: [url]
-I found this---but havent figured out how to implement it in my scenario:
Code:
Source: [url]
View 4 Replies
View Related
Oct 17, 2009
I'm trying to achieve something (which doesn't seem to difficult to me) but I can't get it to work. I want to embed video's through a swf-videoplayer on my website. The idea is that I have (say 750 * 400 px) images wrapped in links. The links point at the videofile. If the user clicks the link, I want to replace the link+image by the swf video with the same dimensions...
View 2 Replies
View Related
Mar 1, 2011
I need to load a different image after, lets say 10 seconds.
So image1.gif will be displayed when the page loads then after say 10 seconds image2.png will replace image1.gif.
View 4 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
Aug 15, 2009
I'm having trouble doing an image replace. When you click on the thumbnail link to replace the large image, it opens in a new window instead of replacing the current image.
View 1 Replies
View Related
Oct 14, 2010
I am using an ajax call to generate a new image with some text across it. How can I "replace" the image in the current page with the one I just generated, they will have the same name.
View 4 Replies
View Related
May 11, 2009
However, I just want to add a small bit of functionality to a new site to make the waiting site owner happy.As you can see here, I got a big image of glasses on the top right of the home page.I do this with CSS only:Html:
<div id="teaser-right"></div>
CSS:
div#wrapper #content #teaser #teaser-right{
[code]....
View 2 Replies
View Related
Apr 28, 2010
Is it possible to replace this logo's 2-image fade code...
... with a JQuery equivalent? If so, could someone point me in the right direction as I'm new to JQuery.
View 2 Replies
View Related
Jan 18, 2010
Im looking to basically have an image which is a button with a value, and when i click the image, it gets replaced by another image with a different value. when clicked again it would return to the original image and value..Is this possible? and if so, please help cos im terrible at javascript!
View 3 Replies
View Related
Sep 28, 2010
I had made some simple fade in animation for my nav bar, everything worked great in Chrome, Safari, FF, Opera, but when I got to work today and got on IE7 the navigation wasn't even clickable! [URL]
View 4 Replies
View Related
Dec 1, 2010
I am looking for a script that will enable me to replace images in my site onMouseOver. the images are inserted in the HTML page using the <img> tag.
View 7 Replies
View Related
Sep 11, 2010
I would like to have an effect like the one seen when one hovers over the portfolio items in this site [URL] what is it called?
View 2 Replies
View Related
May 29, 2002
i only know two things about the image:
1. the source url (it is unique for the document)
2. its position in the document. ie: it is the eleventh image in the document.
how would i go about swapping the image with another one? i would like this to work in ie5.5+ and ns6+.
View 1 Replies
View Related
Apr 19, 2011
I saw one page where image was loading. First, there was something like this image (in this text: first image): click. And then, when image (real) loaded, it replace first image.
View 4 Replies
View Related