Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Round the corner (Nifty wise)

    I know how to round the corners of my DIV rectangles, but is it possible to do the same with the randomly selected images on my index page.

    Any suggestions welcomed. (well almost any!)

    Frank

    www.exitfegs.co.uk
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Sure.

    I'll use this image that I google image surfed as an example:

    http://www.tutorio.com/media/photosh...n-rounding.gif

    Do you see in the second step, the four corners that you cut out to create the rounded box? Well if you actually made four black objects of just these cutout shapes you could overlay your background image with them, and since your background is black it would give the illusion that the image itself has rounded corners even though it's just the cutouts covering it.

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thanks,

    I understand the principle, but I can't think how to do it.
    The random picture is controlled using Javascript.

    Thinking caps on!

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Here is the Javascript.

    Code:
    if(document.getElementById && document.createTextNode) {
    // begin image rotating script
    
    	var r_text = new Array ();
    	r_text[0] = " 1 - Steven relaxing on the Watercress Line.";
    	r_text[1] = " 2 - The Museum of the Tolpuddle Martyrs, Dorchester, Dorset.";
    	r_text[2] = " 3 - An ornamental bridge at 'Mapperton' - a stately home in Dorset.";
    	r_text[3] = " 4 - The front view of 'Mapperton' - A stately home in Dorset.";
    	r_text[4] = " 5 - Higher Came Farm. Our holiday 'digs' on several occasions.";
    	r_text[5] = " 6 - A formal garden at 'Mapperton' - A stately home in Dorset.";
    	r_text[6] = " 7 - A lawn at 'Mapperton',a stately home in Dorset.";
    	r_text[7] = " 8 - A beautiful Japanese picture. Downloaded from the Internet.";
    	r_text[8] = " 9 - A lovely country road.";
    	r_text[9] = "10 - In the grounds of 'Mapperton' in Dorset.";
    	r_text[10] = "11 - A bridge. Somewhere in Australia. Answers on a postcard please. (The Coathanger?)";
    	r_text[11] = "12 - In the grounds of 'Mapperton' in Dorset.";
    	r_text[12] = "13 - Inside St.Nicholas' Church - Moreton. Laurence of Arabia is buried here.";
    	r_text[13] = "14 - The Bell Hotel at Alresford on the Watercress Line. ";
    	r_text[14] = "15 - Horsted Keynes Station.";
    	r_text[15] = "16 - Higher Came Farmhouse. Our holiday 'digs' on several occasions.";
    	r_text[16] = "17 - The sea front at Swanage.";
    	r_text[17] = "18 - Horsted Keynes Station.";
    	r_text[18] = "19 - Steven, Mum Taylor and Betty.";
    	r_text[19] = "20 - You should have turned left at the cross-roads.";
    	r_text[20] = "21 - Winchester Cathedral";
    	r_text[21] = "22 - Road up! - Weymouth, 2005.";
    	r_text[22] = "23 - This way to 'Higher Came' farmhouse.";
    	r_text[23] = "24 - Topiary at Mapperton";
    	r_text[24] = "25 - 'Footsteps' - Our lodging in the Welsh Marches. Very nice.";
    	r_text[25] = "26 - A lovely country road.";
    	r_text[26] = "27 - A view from the tower of Salisbury Cathedral.";
    	r_text[27] = "28 - Books Afloat, a favourite bookshop in Weymouth, Dorset.";
    	r_text[28] = "29 - Mark & Steven at the Museum of the Tolpuddle Martyrs, Dorchester, Dorset.";
    	r_text[29] = "30 - A view from the 'London Eye'. Courtesy of Desmond Anderson.";
    	r_text[30] = "31 - A pond at 'Mapperton' in Dorset.";
    	r_text[31] = "32 - A view from the 'Footsteps' guest house.";
    	r_text[32] = "33 - Devil's Bridge station.";
    	r_text[33] = "34 - On the Welsh Highland Railway at Waunfawr.";
    	r_text[34] = "35 - Messing about in boats!";
    	r_text[35] = "36 - Waunfawr Railway Station.";
    	r_text[36] = "37 - Alresford Railway Station, on the Watercress line.";
    	r_text[37] = "38 - Horsted Keynes Station, on the Bluebell line.";
    	r_text[38] = "39 - A very weedy stream at 'Mapperton'.";
    	r_text[39] = "40 - A beautiful Japanese picture. Downloaded from the Internet.";
    	r_text[40] = "41 - Alresford High Street.";
    	r_text[41] = "42 - The Brecon Mountain Railway Station.";
    	r_text[42] = "43 - But will you get an answer?";
    	r_text[43] = "44 - A Japanese landscape.";
    	r_text[44] = "45 - An Australian Gum Tree.";
    	r_text[45] = "46 - Ayres Rock - Australia.";
    	r_text[46] = "47 - Duke Street - Brighton, England. April 2006..";
    	r_text[47] = "48 - Duke Street Brighton, - England. April 2006.";
    	r_text[48] = "49 - Sea Front, Brighton - England. April 2006.";
    	r_text[49] = "50 - A Coffee house in Russia.";
    	r_text[50] = "51 - Aquila Heights - Dorchester. May 2006";
    	r_text[51] = "52 - Sleepy koala.";
    	r_text[52] = "53 - The London Eye - on the bank of the River Thames.";
    	r_text[53] = "54 - Stuck in the sand - somewhere in Australia.";
    	r_text[54] = "55 - Bodo airdrome - Norway.";
    	r_text[55] = "56 - Derwent Water. In the English 'Lake District'";
    	r_text[56] = "57 - Lake Locarno - Switzerland.";
    	r_text[57] = "58 - Winchester High St, - July 2006";
    	r_text[58] = "59 - An Asian street market";
    	r_text[59] = "60 - The office where it all begins.";
    	r_text[60] = "61 - A pleasant day out on the Bluebell Railway - Spring 2006.";
    	r_text[61] = "62 - The London Eye.";
    	r_text[62] = "63 - The early morning Sun reflected from a glass fronted building.";
    	r_text[63] = "64 - Winchester High Street.";
    	r_text[64] = "65 - Dr Beeching has been here";
    	r_text[65] = "66 - A road in Japan.";
    	r_text[66] = "67 - It's a long road................in Australia";
    	r_text[67] = "68 - Where have all the people gone?.";
    	r_text[68] = "69 - Steven a few years ago.";
    	r_text[69] = "70 - Steve, a few years ago.";
    	r_text[70] = "71 - A Family get together at the Harvester pub at Hemel Hempstead.";
    	r_text[71] = "72 - A street in Worthing - Autumn 2006.";
    	r_text[72] = "73 - A street in Worthing - Autumn 2006.";
    	r_text[73] = "74 - A street in Worthing - Autumn 2006.";
    	r_text[74] = "75 - The 'Prince of Wales' at Devil's Bridge - September 2006.";
    	r_text[75] = "76 - The Sea Front at Eastbourne - September 2006.";
    	r_text[76] = "77 - The Sea Front at Eastbourne - September 2006.";
    	r_text[77] = "78 - Bognor street market - September 2006.";
    	r_text[78] = "79 - O'Connell Bridge - Dublin.";
    	r_text[79] = "80 - St.Albans market - October 2006";
    	r_text[80] = "81 - A street market in Serbia.";
    	r_text[81] = "82 - Frank in a garden at Mapperly.";
    	r_text[82] = "83 - Photo taken near Queenstown, on the South Island of New Zealand.";
    	r_text[83] = "84 - Sweet Dreams - Mum; Madge Taylor.";
    	r_text[84] = "85 - Kingston, New Zealand. South Island";
    	r_text[85] = "86 - A Fjiord in Norway. Taken by Steve on holiday.";
    	r_text[86] = "87 - Eastbourne sea front - September 2006.";
    	r_text[87] = "88 - Many years ago.";
    	r_text[88] = "89 - Frank in Mapperton Gardens.";
    	r_text[89] = "90 - On Tour - From the car window.";
    	r_text[90] = "91 - A street in Beijing.";
    	r_text[91] = "92 - Steven relaxing in Eastbourne - Sept. 2006.";
    	r_text[92] = "93 - Steve - Hove, April 2007";
    	r_text[93] = "94 - Museum in Jaipur.";
    	r_text[94] = "95 - Just before the storm - Sept. 2006.";
    	r_text[95] = "96 - Maremma_on_the_road_Italy.";
    	r_text[96] = "97 - Mevagissey shops.";
    	r_text[97] = "98 - At a cross-roads - somewhere in Australia..";
    	r_text[98] = "99 - We're only here for the beer.";
    	r_text[99] = "100 - Summit of Liatach, Torridon, Highland. Taken by Steve on holiday.";
    	r_text[100] = "101 - The Cuillins. Taken by Steve on holiday.";
    	r_text[101] = "102 - A Norwegian Fjiord. Taken by Steve on holiday.";
    	r_text[102] = "103 - Frank's keyboard.";
    	r_text[103] = "104 - Eddie King. A family friend";
    	r_text[104] = "105 - Smile please!";
    	r_text[105] = "106 - George Street Hove - April 2007";
    	r_text[106] = "107 - The Magic Cafe - Oxford.";
    	
    	var r_hyperlink = new Array();
    	r_hyperlink[0] = "1.html";
    	r_hyperlink[1] = "2.html";
    	r_hyperlink[2] = "3.html";
    	r_hyperlink[3] = "4.html";
    	r_hyperlink[4] = "5.html";
    	r_hyperlink[5] = "6.html";
    	r_hyperlink[6] = "7.html";
    	r_hyperlink[7] = "8.html";
    	r_hyperlink[8] = "9.html";
    	r_hyperlink[9] = "10.html";
    	r_hyperlink[10] = "11.html";
    	r_hyperlink[11] = "12.html";
    	r_hyperlink[12] = "13.html";
    	r_hyperlink[13] = "14.html";
    	r_hyperlink[14] = "15.html";
    	r_hyperlink[15] = "16.html";
    	r_hyperlink[16] = "17.html";
    	r_hyperlink[17] = "18.html";
    	r_hyperlink[18] = "19.html";
    	r_hyperlink[19] = "20.html";
    	r_hyperlink[20] = "21.html";
    	r_hyperlink[21] = "22.html";
    	r_hyperlink[22] = "23.html";
    	r_hyperlink[23] = "24.html";
    	r_hyperlink[24] = "25.html";
    	r_hyperlink[25] = "26.html";
    	r_hyperlink[26] = "27.html";
    	r_hyperlink[27] = "28.html";
    	r_hyperlink[28] = "29.html";
    	r_hyperlink[29] = "30.html";
    	r_hyperlink[30] = "31.html";
    	r_hyperlink[31] = "32.html";
    	r_hyperlink[32] = "33.html";
    	r_hyperlink[33] = "34.html";
    	r_hyperlink[34] = "35.html";
    	r_hyperlink[35] = "36.html";
    	r_hyperlink[36] = "37.html";
    	r_hyperlink[37] = "38.html";
    	r_hyperlink[38] = "39.html";
    	r_hyperlink[39] = "40.html";
    	r_hyperlink[40] = "41.html";
    	r_hyperlink[41] = "42.html";
    	r_hyperlink[42] = "43.html";
    	r_hyperlink[43] = "44.html";
    	r_hyperlink[44] = "45.html";
    	r_hyperlink[45] = "46.html";
    	r_hyperlink[46] = "47.html";
    	r_hyperlink[47] = "48.html";
    	r_hyperlink[48] = "49.html";
    	r_hyperlink[49] = "50.html";
    	r_hyperlink[50] = "51.html";
    	r_hyperlink[51] = "52.html";
    	r_hyperlink[52] = "53.html";
    	r_hyperlink[53] = "54.html";
    	r_hyperlink[54] = "55.html";
    	r_hyperlink[55] = "56.html";
    	r_hyperlink[56] = "57.html";
    	r_hyperlink[57] = "58.html";
    	r_hyperlink[58] = "59.html";
    	r_hyperlink[59] = "60.html";
    	r_hyperlink[60] = "61.html";
    	r_hyperlink[61] = "62.html";
    	r_hyperlink[62] = "63.html";
    	r_hyperlink[63] = "64.html";
    	r_hyperlink[64] = "65.html";
    	r_hyperlink[65] = "66.html";
    	r_hyperlink[66] = "67.html";
    	r_hyperlink[67] = "68.html";
    	r_hyperlink[68] = "69.html";
    	r_hyperlink[69] = "70.html";
    	r_hyperlink[70] = "71.html";
    	r_hyperlink[71] = "72.html";
    	r_hyperlink[72] = "73.html";
    	r_hyperlink[73] = "74.html";
    	r_hyperlink[74] = "75.html";
    	r_hyperlink[75] = "76.html";
    	r_hyperlink[76] = "77.html";
    	r_hyperlink[77] = "78.html";
    	r_hyperlink[78] = "79.html";
    	r_hyperlink[79] = "80.html";
    	r_hyperlink[80] = "81.html";
    	r_hyperlink[81] = "82.html";
    	r_hyperlink[82] = "83.html";
    	r_hyperlink[83] = "84.html";
    	r_hyperlink[84] = "85.html";
    	r_hyperlink[85] = "86.html";
    	r_hyperlink[86] = "87.html";
    	r_hyperlink[87] = "88.html";
    	r_hyperlink[88] = "89.html";
    	r_hyperlink[89] = "90.html";
    	r_hyperlink[90] = "91.html";
    	r_hyperlink[91] = "92.html";
    	r_hyperlink[92] = "106.html";
    	r_hyperlink[93] = "94.html";
    	r_hyperlink[94] = "95.html";
    	r_hyperlink[95] = "96.html";
    	r_hyperlink[96] = "97.html";
    	r_hyperlink[97] = "98.html";
    	r_hyperlink[98] = "99.html";
    	r_hyperlink[99] = "100.html";
    	r_hyperlink[100] = "101.html";
    	r_hyperlink[101] = "102.html";
    	r_hyperlink[102] = "103.html";
    	r_hyperlink[103] = "104.html";
    	r_hyperlink[104] = "105.html";
    	r_hyperlink[105] = "107.html";
    	r_hyperlink[106] = "108.html";
    setTimeout("location.reload(true)", 45000);
    	function showimage() {
    		var i = Math.round((r_text.length-1)*Math.random());
    		var img_rnd = new Array ("steve6.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg", "16.jpg", "17.jpg", "18.jpg", "19.jpg", "20.jpg", "21.jpg", "22.jpg", "23.jpg", "24.jpg", "25.jpg", "26.jpg", "27.jpg", "28.jpg", "29.jpg", "30.jpg", "31.jpg", "32.jpg", "33.jpg", "34.jpg", "35.jpg", "36.jpg", "37.jpg", "38.jpg", "39.jpg", "40.jpg", "41.jpg", "42.jpg", "43.jpg", "44.jpg", "45.jpg", "46.jpg", "47.jpg", "48.jpg", "49.jpg", "50.jpg", "51.jpg", "52.jpg", "53.jpg", "54.jpg", "55.jpg", "56.jpg", "57.jpg", "58.jpg", "59.jpg", "60.jpg", "61.jpg", "62.jpg", "63.jpg", "64.jpg", "65.jpg", "66.jpg", "67.jpg", "68.jpg", "69.jpg", "70.jpg", "71.jpg", "72.jpg", "73.jpg", "74.jpg", "75.jpg", "76.jpg", "77.jpg", "78.jpg", "79.jpg", "80.jpg", "81.jpg", "82.jpg", "83.jpg", "84.jpg", "86.jpg", "87.jpg", "88.jpg", "dadingardens.jpg", "carwindow.jpg", "Beijing.jpg", "93.jpg", "Hove1.jpg", "95.jpg", "96.jpg", "97.jpg", "mevagissey-shops.jpg", "106.jpg", "100.jpg", "101.jpg", "img090.jpg", "img163.jpg", "102.jpg", "107.jpg", "smileplease.jpg", "Hove2007.jpg", "108.jpg");
    	
    		var p = document.getElementById('imgcaption');
    		var br = document.createElement('br');
    		var new_img = document.createElement('img');
    
    		var new_link = document.createElement('a');
    		
    		// this adds the anchor
    		var imagelink = p.appendChild(new_link);
    		p.firstChild.nodeValue = r_text[i];
    		p.insertBefore(br,p.childNodes[1]); // adding a line break before the anchor so the image will be underneath the text
    		imagelink.setAttribute('href', r_hyperlink[i]);
    		imagelink.setAttribute('class','previewlink');
    		
    		// this adds the image within the anchor
    		var img = imagelink.appendChild(new_img);
    		img.setAttribute('src', img_rnd[i]);
    		img.setAttribute('class','previewimage');
                img.style.height = '520px';
    		img.style.width = '720px';
                 
    	}
    	// end image rotating script
    	
    	// begin clock script
    	var tday =new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
    	tday.push("Dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi");
    	var tmonth =new Array("January","February","March","April","May","June","July","August","September","October","Novem ber","December");
    	tmonth.push("janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre");
    	function GetClock(){
    	 var d = new Date();
    	 var nday = d.getDay();
    	 var nmonth = d.getMonth();
    	 var ndate = d.getDate();
    	 var nyeara = d.getYear();
    	 var nhour = d.getHours();
    	 var nmin = d.getMinutes()
    	 var nsec = d.getSeconds()
    	 if(nyeara<1000){nyeara=(""+(nyeara+11900)).substring(1,5);}
    	 else{nyeara=(""+(nyeara+10000)).substring(1,5);}
    	 if(nhour <= 9) {nhour = "0" +nhour;}
    	 if(nmin <= 9) {nmin = "0" +nmin;}
    	 if(nsec <= 9) {nsec = "0" +nsec;}
    	 for (var i=0; i<2; i++){
    	 document.getElementById('clockbox'+i).innerHTML= tday[nday+i*7] + ", " + tmonth[nmonth+i*12] + " " + ndate + ", " + nyeara + "&nbsp;&nbsp;" + nhour + ":" + nmin + ":" + nsec;
    	 }
    	 setTimeout("GetClock()", 1000);
    	}
    	// end clock script
    	
    	
    	window.onload = function() {
    		showimage();
    		GetClock();
    	}
    }
    
      function greet() {
      var todaydate = new Date();
      var timeis = todaydate.getTime();
      todaydate.setTime(timeis);
      var houris = todaydate.getHours();
      if (houris >17) display = "Evening";
      else if (houris >11) display = "Afternoon";
      else display = "Morning";
      var title = document.title;
      var welcome = document.createTextNode("Good " + display + ". Welcome to the Taylor Website");
    document.getElementById('greet').appendChild(welcome);
    }
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    You just need to change the Javascript a bit.

    Currently you're putting the image inside of the anchor element. Instead, you need to set the background of the anchor element to the image. This can be done programatically with js:

    Code:
    var p = document.getElementById('imgcaption');
    var a = document.createElement('a');
    a.style.backgroundImage = 'whatever.jpg';
    .. set a attributes ..
    p.appendChild(a);
    Now you need 4 elements to stick the four corners on (assuming that the image sizes varry, if they don't you'll only need two.

    It's kind of hairy, but you could certainly do something similar to this:

    <a href="blah.html"><span><strong><span><em>Click here to view the image fullsize</em></span></strong></span></a>

    Since you're building that HTML dynamically you'd have to create those tags similar to how the rest is created and append them to the anchor element.

    Then you could just write some simple CSS:

    Code:
    #imgcaption a { 
     text-indent: -9999px; 
     margin: 0;
     padding: 0;
     }
    #imgcaption a span { 
     background: url(topleft.png) left top no-repeat;
     display: block;
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     }
    #imgcaption a strong{ 
     background: url(topright.png) right top no-repeat;
     display: block;
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     }
    #imgcaption a span span { 
     background: url(botleft.png) left bottom no-repeat;
     display: block;
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     }
    #imgcaption a em { 
     background: url(botright.png) right bottom no-repeat;
     display: block;
     height: 100%;
     width: 100%;
     margin: 0;
     padding: 0;
     }
    Last edited by vtjustinb; 11-01-2007 at 03:19 PM.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Thank you vtjustinb,

    I rather think that this is beyond my powers. Unless I can think of a different approach. However I'll give it a whirl. Who knows, I might surprise myself and succeed. Hope springs eternal..................

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •