JQuery :: How To Replace Only Part Of Image Source

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


ADVERTISEMENT

Replace Image Source With Other Source

Nov 23, 2009

I have a website that I frequently visit (FWIW, Firefox 3.x is my browser of choice) with many image sources referring to URLs that end with "-thumbnail.jpg". However, for better image quality, I am trying to use Greasemonkey to replace all instances of "-thumbnail.jpg" in the source of images on this site with "-bigthumbnail.jpg". The closest I could think of was to somehow use getElementsByTagName and innerHTML.replace, but realized that innerHTML does not do HTML, only content.

Below is as far as I tried to get on my own,

var as,ae;
as = document.getElementsByTagName("img");
for (var i = 0; i < as.length; i++) {
ae = as[i];
ae.innerHTML = ae.innerHTML.replace(/-thumbnail/gi, "-bigthumbnail");
}
})();

View 2 Replies View Related

JQuery :: Replace Or Hide A Part Of A Picture?

Jan 19, 2010

I would like to know if it is possible to hide a specific aera of a picture with jQuery and cover this zone by another color and text?

View 2 Replies View Related

JQuery :: Replace Part Of All The Links On A Page?

Jul 12, 2010

I tried finding a similar situation in the forums, but was unable to discover anything sepcific. I think I may be way off here, and or trying to do something bizarre, but what I am trying to do is change only part of the the url for all of the links on a page. So say I want to change:

href="/something/something/all"

to

href="/something/something/specific"

I think I need to use each() in combination with attr but I am not exactly sure how. This is what I have so far (with no luck):

$('a').each( {
$(this).attr('href').replace('all','specific');
});

I've successfully changed part of a single link based of it's enclosing div id, but if there is more than one link in the div, it replaces the entire href of all the other links in that div to be the same as the first one. So that's why I think I need to use each(). But again, I'm not sure how to do this properly in this case.

View 2 Replies View Related

JQuery :: Replace Part Of An Link In A HTML File?

Sep 30, 2010

I want to replace a part of a link. See my example below.

The Links :

1)
href="/businessapplications/iop/weschein/Lists/Receipts/EditForm.aspx
?ID=219"
2)
href="/businessapplications/iop/weschein/Lists/Receipts/EditForm.aspx
?ID=220"

[Code].....

View 3 Replies View Related

Regexp - Replace Part Of Match

Feb 5, 2006

this will match any instance of a number following a letter/[a-z][0-9]/gmiso thatvar str="abc123 456";alert(str.replace(/[a-z][0-9]/gmi,''));would return "ab23 456".

how would i replace just the number? so as to get back "abc23 456" - or ideally "abc 456" ?

View 1 Replies View Related

JQuery :: Login Script - Replace, The ?secure-page Part With The File Name Of The Page?

May 10, 2010

I am using a Jquery/PHP/MySQL login script which is supposed to display an error or success message when the user enters their username/password and also if the username/pw is successfull go to a secure page. Right now as I have it coded, this isn't working properly. Basically nothing is displayed either way.Also,wasn't sure if I just needed to replace, the ?secure-page part with the file name of the page I want to go to if successful?Here is the code as I have it now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>[code].....

View 1 Replies View Related

Image Insertion Page That Is Part Of A JS WYSIWYG - Put Caption Bar After The Image In The Main Code?

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

JQuery :: Way To Change Image Source

Sep 6, 2010

Can I change an image source on user click?[code]...

View 2 Replies View Related

JQuery :: How To Detect Image Source

Oct 13, 2010

I need to write a hover function to detect a div's image source.If it has a 'apple.jpg' image, then change the src to 'orange.jpg'.If the div has no image, then do nothing.

<div id='CheckImg'>
<img src="apple.jpg">
</div>

View 3 Replies View Related

JQuery :: $.post As Source For Image

Aug 28, 2011

I am trying to post to a php page that generates and image and then use that img as the background for a div.

originally on the php side i was using the GET method, but I needed to feed more and more parameters into the function and POST made more sense.

my original "get" style jquery function which worked looked something like this I'll take out the stuff that doesn't really pertain to the problem

function render_image(get_img_url, area)
{
var map_image = new Image();
var map_img = map_img_url;

[Code].....

This actually works and according to firebug, the post is responding as 200 and outputting image information. It just won't apply that information to the background-image attribute of the div.

View 1 Replies View Related

JQuery :: Toggle The Source Of An Image?

Nov 19, 2010

I recently discovered the awesomeness of jQuery, and decided to use it.I'm currently using the slideToggle() to toggle my div nicely.The thing is, I also want to have a small icon to change according to wether the div is visible or not.Here's my HTML:

HTML Code:
<div class="box">
<!-- Content of this box will come later -->

[code]....

View 1 Replies View Related

JQuery :: Changing Image Source From Database?

Oct 24, 2011

What I want to do is replacing the source of an image so another image is displayed. The new source must come from a database.

HTML

<img id="image" src="" alt="">

JQuery

<script>
$(document).ready(function(){
var ID = 1;
$('image').attr('src', {src: 'image_load.php?id=' + ID} );

[Code].....

View 4 Replies View Related

JQuery :: Getting Image By Source With Special Characters?

Apr 14, 2010

I'm trying to get some images on my page by their src attribute. Src attribute have this format :

src = [URL]

For doing that I'm using the following query :

$j("img[src*='request=gettile'][src*='"+$j(this).data("target")+"']")
$j(this).data("target") contains my mapname, it works fine.

But my users can use mapname that can be contained in another map names. Example : mapblabla and pbla. When I'm searching pbla it's returning images of mapblabla and pbla. That's why I need to put the symbol equal before and the symbol & after my map name. Then the request is :

$j("img[src*='request=gettile'][src*='\="+$j(this).data("target")+"\&']")

View 1 Replies View Related

JQuery :: Switch Image Source During Toggle?

Oct 2, 2009

I have some divs I am toggling and there is a little + sign image I want to change to a - sign image when the toggle event occurs, but can't quite figure it out. Here is the toggle code I have (taken from

[Code]...

View 5 Replies View Related

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 View Related

JQuery :: Showing - Displaying Smaller Part - Rectanle Of An Image ?

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

Jquery :: Cart Image - Alternating Row Color Of Dropdown Part

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

Ajax :: Set The Image Source To The Image Name Returned Back?

Feb 15, 2012

I have an ajax call that sends some data to process.php and return back the image name. In process.php I returned the name as follows:

echo "image.png";
The ajax call is:
var $chart = $( '#chart' );
var $test = $( '#test' );

[Code]....

so from test div i get the path printed right: (./images/image.png), but I don't get the image to be desplayed

View 2 Replies View Related

JQuery :: Can't See Source (with View Source) When Loads External Html Into A Div?

Feb 23, 2011

I got some code that loads divs from other web pages into a particular div in my main page. In other words, I click on a button, and this tells jquery to load afragment of a particular page into my main page. For instance if I have 5 web pages onrock stars, I could have 5 buttons, and each button could load one rockstar's biography into a div on the main page (and replace whatever was there before). This works, and I do see the content that it loaded. But when I do 'view source' in IE, I do not see that content (the bio of the rock star). Another clue that this content is not really there, is when I try and run some code on that content. The content (from those external pages) have divs with specific names, and I try and make them into collapsible panels by running the following short function:

var IdentifyPanels = function() {
$("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").toggle(
function() {

[code]....

View 2 Replies View Related

Alternative To Document.write To Replace Image On Page - Click Event That Replaces An Image On Page With New Image

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

JQuery :: Multiple Source Without One Source Stop The Other

Aug 30, 2010

i don't know so much about jquery so just i use them with indication from their web site. so my problem is how can i use multiple source of jquery without one source stop the other,and that what i need:

[Code]....

View 2 Replies View Related

JQuery :: Replace Image With SWF OnClick

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

Changing Image Source

May 2, 2006

ok, I am just learning this stuff, small stupid question here...I am
trying to swap images in a little ajax application, and the code
handling that looks like...

document.placeholder.src =xmlHttp.responseText

/
no big deal i know, if i print xmlHttp.responseText to the screen the
link is correct, but anytime I assign it as a src, i get the link+(all
the page html attached on the end) and i dont know why?

View 8 Replies View Related

Stretching Image In DIV With URL() Source?

Sep 28, 2010

I have an image stretched to fit as the page background in a DIV and the page content inside a seperate DIV. When you mouseover the links, the background changes to represent each link (as does the color of the link... but that is working fine). Trouble is, the images that are being pulled aren't fullsized as the main background is... it is being cut off by some code I can't figure out and isn't resizing.Here is the code...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>[code].....

View 3 Replies View Related

How To Change Source Value Of Image Tag

May 30, 2011

Using javascript, I want to change the src value of the following image tag:
Code:
<div id="header_container">
<div id="header_content">
<div class="header_img" >
<img src="[URL]" height="595" width="842"></a>
</div>
</div>
</div>
Basically I want to replace image1.png with image2.png in javascript, and I'm not sure how. I've tried various getElementById, getElementByClass things but none of them seem to work.

View 5 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved