Sliced apart infographic with links

  • Joe18

    (@joe18)


    10 years ago

    I have an infographic illustration that was created using Illustrator. It was then sliced apart because there are 11 areas that need to have links. The code that illustrator gave me is no different from what photoshop would give me. You get an .html document and the sliced images because the output code is set up to preview right then in a browser, so its not set up to go right into WordPress.

    I put the output sliced images in a folder and gave it a name and placed the folder on the server under the theme. Same place where the image folder is for the theme. (So the sliced images are in their own folder…not sure if that is conflict but shouldn’t be.) This new folder is called “infoimages”.
    I then created a new page in wordpress. Now this is where things go array. I understand I will need to put some CSS style information into the style sheet but setting this up on the wordpress page is not working.
    Going right back to the beginning before I messed with the code…below is just a portion of the output .html code for the sliced infographic. Please note I only gave two lines that include the images… No need to show all 20 of them since the only difference is the image name. Could someone guide me in the right direction and tell me what to remove from this code and what to add. I know I would not be putting <html><head>, etc. on the wordpress page…I just want you to see the code that was given during output so you can tell me how to fix this. (Folder on the server that holds all the sliced images is called infoimages.) All the sliced images need to link to other internal pages within the site. So I need linked information as well.
    <html>
    <head>
    <title>Print</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
    </head>
    <body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
    <div style=”position:absolute; left:0px; top:0px; width:600px; height:334px;”>
    <div style=”background-image:url(infographic_600_05.png); position:absolute; left:508px; top:0px; width:92px; height:60px;” title=””>
    </div>
    <div style=”background-image:url(infographic_600_06.png); position:absolute; left:381px; top:60px; width:61px; height:86px;” title=””>
    </div>
    </div>
    </body>
    </html>

Viewing 9 replies - 1 through 9 (of 9 total)
  • Chitcher1

    (@chitcher1)

    Let me guess, your images aren’t showing?

    This is because when you uploaded your images to your server, the path referenced in the background-image:URL(infographic_600_05.png); is now incorrect.

    What you need to do is change this path to look like this(assuming your css file is directly in your “specific-theme” folder):
    background-image:url(YOUR-IMAGE-FORLDER-NAME/infographic_600_05.png);

    Let me know if that works ??

    Chitcher1

    (@chitcher1)

    Alternatively you could use image maps. Not sure of your level of HTML skills but you could use these. The concept of it is to map out invisible clickable points onto one singular image(instead of chopping it up)

    https://www.image-maps.com/

    Thread Starter Joe18

    (@joe18)

    Thanks!!!!!!….I was on the right track! I did have my path correct actually. Because I didn’t totally understand the relationship of some of the code…. I had removed a part of it…
    background-image:url and the ( )
    I still don’t understand why when the images are .png and have no background. Unlsess it’s just an output setting from slicing. Explain please. If it’s something I should know at this point in my life I will look it up on my own. LOL
    So I put that part of the code I removed all back in and its working now. I just need to play with the CSS.

    Chitcher1

    (@chitcher1)

    Glad you got it to work!

    The background-image or background property is really the only way to reference an image in CSS. Think of your png as the background to that particular div.

    So for instance, each div is referencing a piece of your sliced up image. Each div has the height and width and with css you are now applying it’s background-image.

    When you see images on a website like a slideshow, we don’t use css to reference the image. Instead we use HTML to reference it by using the <img> tag. Here are some links you can take a look at for a better explanation.

    Background-Image CSS
    https://www.w3schools.com/cssref/pr_background-image.asp

    Img Tag HTML
    https://www.w3schools.com/tags/tag_img.asp

    Thread Starter Joe18

    (@joe18)

    (Sorry in advance if this thread went through twice. I’m putting it in again because it looks like on my end it didn’t go through. Luckily I still had my wording saved in a doc.)

    Thanks…it’s making sense. I will check out the sites you gave me above.
    Almost there!
    My only issue right now is
    ? my image is falling partially behind the footer or rather the footer is overlapping on the image
    ? I can’t seem to get the image centered and in a perfect world would like it to work on all browsers and devices.

    This is the output code from slicing that was at the top of the page of code after slicing.
    <body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
    <div style=”position:absolute; left:25%; top:0px; width:600px; height:334px;”>

    Now into the wordpress page.
    I had removed the above code from the top of the page. Didn’t feel like I needed the bgcolor etc. and figured the position information could be moved to CSS.

    So I then started with the below code…I’m on the wordpress page….remember the image is showing up but half behind the footer.

    [span12]
    <div class=”info graphic”>

    the next bit of code is all image code information. Only giving one since its just repeated basically….
    <div style=”background-image:url(/wp-content/themes/theme22336/foldername/infographic_600_03.png); position:absolute; left:205px; top:0px; width:176px; height:146px;” title=””>

    </div>
    [/span]

    Then in style.css
    I put…

    .infographic {
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    }

    I did have display: absolute….. I’ve been using trial and error. I’m just giving you my last attempt and I keep changing it. So Im still fighting with it.

    Thank you for your time.

    Ok so i’m going to show you the correct way of doing this. First and foremost, you can NEVER count on auto generated code from Photoshop, Dreamweaver, or for that matter, any CMS auto generated code. It adds extra code that is completely unnecessary.

    For this example we are going to assume we have a folder of images on the server and we need to piece them together to make one whole image. We are also going to assume that we want to work within the WordPress text editor found on every page editor.

    Step 1
    We need to create a wrapper div that is equivalent to the width of the entire image that we are piecing together. Lets assume that it is 960px wide. The height doesn’t matter for this.

    <style>
#wrapper{width:960px;}
</style>

<div id="wrapper">

</div>

    Step 2
    Now we need to add in the individual divs one by one that will hold each individual image to create a whole.

    <style>
#wrapper{width:960px;}
#image1{
background-image:url('image1.png');
float:left;
width:"width of image"
height:"height of image"
}
</style>

<div id="wrapper">
  <div id="image1"></div>
  <!------Duplicate image1 div for all other images--------->
 <!-------Keep image divs within wrapper div-------------->
</div>

    As long as the images equal the total width when put in a row, you can do this for all other images. Once you’ve reached the max width, start another row of images until you complete the total image. Let me know how you make out.

    FYI, put the css in your css file. Not in the wordpress editor

    Thread Starter Joe18

    (@joe18)

    Ok…I’ve been working it. I did a lot of trial and error before coming back. I think I fell into the grand canyon on a part of the instructions.
    Feeling like a failure. (My folder is on the server holding the images. We will call it foldername…) I understand what you are saying that I can not trust the auto generated code coming from other applications. Just having a hard time figuring out what to take away and what to add.
    I understand the concept of once images add up to 600 pixels in width I then go to the next line. Not sure how to set it up though. Can we pretend that the first two images add up to 600pixels in width combined and the following two as well combined 600 pixels in width and show me how to set this up along with the CSS. (not understanding the image1.<div id=”image1″> I understand div’s I just don’t understand how you want me to set this up and if I’m suppose to rename everything )

    So on my page for example…
    <div id=”wrapper”>
    <div style=”background-image:url(/wp-content/themes/theme22336/foldername/infographic_600_03.png); position:absolute; left:205px; top:0px; width:219px; height:146px;” title=””>
    </div>
    <div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_04.png); position:absolute; left:213px; top:0px; width:381px; height:60px;” title=””>
    </div>
    <div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_05.png); position:absolute; left:508px; top:0px; width:176px; height:60px;” title=””>
    </div>
    <div style=”background-image:url(/wp-content/themes/theme22236/foldername/infographic_600_06.png); position:absolute; left:208px; top:0px; width:424px; height:60px;” title=””>
    </div>
    </div>

    I don’t know what I should be removing or changing after wrapper.

    On the CSS doc. this is what I have now. (I removed all my trial & error code I had.)
    #wrapper {
    width: 600px;
    }

    No worries, we’re going to get through this I promise! When I wrote image1 that was just a random ID name I gave it. In the css that I wrote you will see I referenced it with a #. You need to get rid of the absolute, top, and left properties. You only need to apply the styles that I have in my example. Those include float:left, width, height, and background properties. The wrapper is the container for your images. If you want to move the image around as a whole you do it with the wrapper. As for the others, the float properties will do the positioning for you.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Sliced apart infographic with links’ is closed to new replies.