By Nicole Riley

Screenshots of creating pop ups and adding them to my

blog using JavaScript

I used this hue/saturation tool to change the tones of the image I am going to use for my web pop up for my pickup 52 album advert . This tool is really useful if you want to change the tones of things weather its dulling them or making them more vibrant, it also allows you to change it from green to red or blue I know this because I did some tests seeing whet colour the image would look best.

This is the original image

This is the image I will be using for my web popup

During my development I found these two turned out good I just don't think they will go with the theme or colour scheme.

This development Doesn't fit the colour scheme

This development doesn't fit the colour scheme and it seems quite pixelated almost too un realistic giving the wrong style of may cause the audience to think its sci-fi or techno music

My width and length as displayed below is longer length ways than width I decided that I was going to do this after viewing other album pop ups which where all portrait too as shown bellow by the album web pop up examples.

This is what my pop up started out like I filled the rest of the page with black so it would allow the image to gradually blend in I also used a black background because most web pop ups and adverts uses black as a base to give the image and writing a base that they can stand out on I also think it looks the most professional out of all the colours I tried. The colour scheme is going to be red white and black because its the colour of the bands logo and because it keeps the link with a pack of playing cards which their band name stems from. Used the bucket tool after adding a layer to the frame.

This was the log I used it is their band logo that I created on Photoshop they later decided to actually use it as their logo I had to colour the playing card background in black using the pencil tool to colour it in this allowed me to make it blend in more I also added the ends to the letters back on after cropping it. I then added more text to the web pop up to tell them the album name the release date the platforms that the album is available to buy on and the songs included on the album.

This is my finished product I found that this suites the bands style and gives of a professional look just like the web pop up examples that are actually used today. I decided to make the writing go smaller on the lees important information because this is what most pop up advertisements do.

I also made sure that the closer to the middle the righting was the more importance it meant, for example the audience mainly need to know the band the album name and release date.

<script type="text/javascript">var win = window.open('http://1.bp.blogspot.com/-68sl-mTIXAY/U1-vCSM01LI/AAAAAAAAALM/TFLR3Te_pY4/s1600/Tropical-Delight.jpg', "popup",

'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50');if (!win){// alert("failed for most browsers"); document.body.onLoad = function () { window.open('http://1.bp.blogspot.com/-68sl-mTIXAY/U1-vCSM01LI/AAAAAAAAALM/TFLR3Te_pY4/s1600/Tropical-Delight.jpg', 'poppage',

'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50'); };}else { var thisdoc = document; //Is it Chrome? if(/chrome/.test(navigator.userAgent.toLowerCase())){ setTimeout(function() { if ((win.innerHeight > 0) == false){// alert("failed for chrome"); thisdoc.body.onLoad = function () { window.open('http://1.bp.blogspot.com/-68sl-mTIXAY/U1-vCSM01LI/AAAAAAAAALM/TFLR3Te_pY4/s1600/Tropical-Delight.jpg', 'poppage',

'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50'); }; } }, 100); }else{ win.onload = function() { if ((win.innerHeight > 0) == false){// alert("failed for others"); thisdoc.body.onLoad = function () { window.open('http://1.bp.blogspot.com/-68sl-mTIXAY/U1-vCSM01LI/AAAAAAAAALM/TFLR3Te_pY4/s1600/Tropical-Delight.jpg', 'poppage',

'toolbars=0, scrollbars=1, location=0, statusbars=0, menubars=0, resizable=1, width=650, height=650, left = 300, top = 50'); }; } }; }}</script>

JavaScript

Steps of how I inserted the web popup into my blog

• Step 1: I opened my blog and went onto my dashboard.• Step 2: I clicked on ‘Page’ to open a new page in my blog and inserted my one pop up

image. Save and publish the page. I could only do one of them because the website only allows one to be inserted.

• Step 3: I right clicked on one of my images and selected ‘Copy link address’. I then copy and pasted this link onto a Word document, because i will need it later.

• This is my image link address• http://1.bp.blogspot.com/-7TlFuX8XCH0/U2N5HOWz92I/AAAAAAAAASo/

XgvLKhjqsSo/s1600/WEB+POP+UP+PICK+UP+52.png• Step 4: I then went back to my Blog dashboard and selected ‘Layout’.• Step 5: Then clicked ‘Add gadget’ from one of the gadgets at the bottom of the page.• Step 6: then gave my gadget the title web pop up pickup 52• Step 7: I then copy and pasted the JavaScript below into the ‘Content’ window.• Step 8: I then adjusted the JavaScript to suit my needs. So I Copy and pasted the image link for my image in the area highlighted below, Changed the height and width of the window to the same size as my image and Positioned the window by changing the left and top margins.