June 16, 201313 yr Hello, I have a series of addresses on my contact page. I have a 1200x250 px series of maps for each address that goes across the top of the page. I want to click on an address, and the image changes to the image of that map of the address. EASY! So, what I have done so far. I have got a jQuery script: var itemInfo = { // Initialise the item information img1: ['/img/map.png', ''], img2: ['/img/map2.jpg', ''], img3: ['/img/map3.jpg', ''], }; $(function() { $('#maps a').click(function() { // When an item is selected var id = $(this).attr('href').replace(/#/, ''); // Retrieve its ID $('#info img').attr('src', itemInfo[id][0]); // Set the image $('#info p').text(itemInfo[id][1]); // And text return false; // Prevent default behaviour }); }); I am using the address links in the following format: <ul> <li><a href="#img1">Address 1</a></li> <li><a href="#img2">Address 2</a></li> <li><a href="#img3">Address 3</a></li> </ul and the image wrapper is as follows: <div id="info"> <div class="map-grad" style="background-image: url(/img/map.png);"> </div> </div> the css of the wrapper is as follows: .map-grad { background-image: url(../img/map.png); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src=//ssl.gstatic.com/s2/oz/images/local/map_gradient.png, sizingMethod=scale)"; background: -webkit-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: -moz-linear-gradient(top, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: -ms-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: -o-linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background: linear-gradient(bottom, transparent 0%, transparent 66%, rgba(0, 0, 0, 0.294) 77%, rgba(0, 0, 0, 0.497) 91%, rgba(0, 0, 0, 0.7) 100%), url(../img/map.png); background-position: center; height: 250px; max-height: 250px; max-width: 1600px; } So, I have all of this! now, I can get rid of the css background-image at the end of the <div class="map-grad"> and simply put a <img src="map1.png"> and the jQuery will replace this. This currently works, however I have a gradient over the image that really compliments the design of the website! So, I am after some assistance with someone who knows jQuery to help me rewrite my script to replace all of the ../img/map.png with the relevant link depending on which address link I click. One option is bringing all of the css from the stylesheet above for the .map-grad and putting it within the map-grad div tag around the style="css-here" However, in any case, I will need to replace every mention of the map image which in this case is 6 times. Another more favourable option by me, is to create a class for each address. It will be identical except the background-image will point to the relevant image. I am just unsure on how to rewrite my code to change the div class when clicked. Help will be a live changing save! Criticism is welcome also if I have coded something awkwardly. Thanks Edited June 16, 201313 yr by lcot
June 16, 201313 yr Author Unfortunately, this is a localhost and have no server to host on at this moment. I have however in the meantime been working hard at it reading documentation after documentation and have arrived at the following: (post for assistance if anyone may need it). $('ul[class="address-list"] li a').on('click', function(e) { e.preventDefault(); var cl = $(this).attr('href').replace('#',''); $('.map-wrapper').removeClass().addClass('map-wrapper '+cl); return false; // Prevent default behaviour }); and the image wrapper: <div class="map-wrapper mg-default"></div> and the list of links: <div class="span3"> <h4 style="line-height: 0px; text-decoration: ; color: #060; display:inline;"><i class="icon-angle-right" style="display:inline;"> Our Offices</i></h4> <ul class="address-list"> <li><a href="#mg-london"> <address> <strong>Head Office - London</strong><br /> Suite 304, Crown House<br /> North Circular Road<br /> London NW10 7PN<br /> <abbr title="Phone">P:</abbr> 020 8961 2632<br> </address> </a></li> <li><a href="#mg-sheffield"> <address> <strong>Northern Office</strong><br /> 133 Abbeydale Road<br /> Sheffield<br /> S7 1FE<br /> <abbr title="Phone">P:</abbr> 0114 438 8047<br> </address> </a></li></ul> </div><!-- span3 --> <div class="span3"> <h4 style="line-height: 0px; text-decoration: ; color: #060; display:inline;"><i class="icon-angle-right" style="display:inline;"> Our Stores</i></h4> <ul class="address-list"> <li><a href="#mg-dewsbury"> <address> <strong>Dewsbury</strong><br /> 102 Pionier House<br /> Halifax Road<br /> WF13 4JJ<br /> <abbr title="Phone">P:</abbr> 0192 445 9740<br> <abbr title="Email">@:</abbr> Dewsbury@familiesrelief.org.uk </address> </a></li> <li><a href="#mg-birmingham"> <address> <strong>Birmingham</strong><br /> 517 Moseley Road<br /> Birmingham<br /> B12 9BX<br /> <abbr title="Phone">P:</abbr> 0121 440 8840<br> <abbr title="Email">@:</abbr> Birmingham@familiesrelief.org.uk </address> </a></li></ul> </div><!-- span3 --> <div class="span3" style="margin-top: 22px;"> <ul class="address-list"> <li><a href="#mg-ealing"> <address> <strong>Ealing</strong><br /> 93 The Broadway<br /> West Ealing<br /> W13 9BP<br /> <abbr title="Phone">P:</abbr> 0208 567 3399<br> <abbr title="Email">@:</abbr> Ealing@familiesrelief.org.uk </address> </a></li> <li><a href="#mg-halifax"> <address> <strong>Halifax</strong><br /> Diversity Project<br /> 198 Queens Road<br /> HX1 4NE<br /> <abbr title="Phone">P:</abbr> 0142 232 2550<br> <abbr title="Email">@:</abbr> Halifax@familiesrelief.org.uk </address> </a></li></ul> </div> <div class="span3" style="margin-top: 22px;"> <ul class="address-list"> <li><a href="#mg-greenford"> <address> <strong>Greenford</strong><br /> 64 The Broadway<br /> Ruislip Road<br /> Greenford UB6 9QJ<br /> <abbr title="Phone">P:</abbr> 0208 578 9080<br> <abbr title="Email">@:</abbr> Greenford@familiesrelief.org.uk </address> </a></li> <li><a href="#mg-sheffield"> <address> <strong>Sheffield</strong><br /> Al Shifa Charity Shop<br /> 133 Abbeydale Road<br /> Sheffield S7 1FE<br /> <abbr title="Phone">P:</abbr> 0114 438 8047<br> <abbr title="Email">@:</abbr> Sheffield@familiesrelief.org.uk </address> </a></li></ul> </div> This, gets me to the point where it all works fine! I now just would like to add an easing effect.. any ideas on what to add and where for a fade in effect for example? ALSO, I know this is working.. But I would like to link the picture to the google map page in a new window or tab. I would like the link to change depending on what image is being viewed. Any ideas on this? Edited June 16, 201313 yr by lcot
June 16, 201313 yr maybe something like this .map-wrapper{ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
Create an account or sign in to comment