image drop downbox slide down box

  • 1
  • Question
  • Updated 8 years ago
  • Answered
Can someone tell me where to place a jpg image in the following code. I have made image which I want to appear instead of a cream box. This is the CSS code. Just need to know where to put the full image name, so that it will appear when page loads. Yes, probably logical, but?? Thank you.

#dropinboxv2cover{
width: 320px; /*change width to desired */
height: 220px; /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 300px; /*change width to above width-20. */
height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black; /*Customize box appearance*/
background-color: lightyellow;
padding: 4px;
position:absolute; /*Don't change below 3 rules */
left: 0;
top: 0;
}

0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
  • very happy indeed if someone can help on this !

Posted 8 years ago

  • 1
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
Is there a demo for what this is supposed to look like? I'm not that great with code but I might be able to figure it out if I have a visual.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Diane, thanks. here is link:
http://www.dynamicdrive.com/dynamicin...
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello JenC

Try replacing this line of code: background-color: lightyellow;

with the following: background: url(resources/yourimage.jpg);

Please let me know how this goes.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Well, have done as you said (I did do this also prior to sending original request). All it does each time is then take out the colour and have a transparent box come down !! By the way, the code starts with
<!--
<style type="text/css">
-->

and ends with
<!--
</script>
-->

the part for the div is as follows:

<!--
<div id="dropinboxv2cover"> <div id="dropinboxv2"> INSERT YOUR CONTENT HERE. DO NOT REMOVE THE TWO OUTER DIVS<br> <p align="right"><a href="#" onclick="dismissboxv2();return false">Close It</a></p> </div> </div>

-->

then my image needs again to be put in. Oh dear! am at a loss. thks
Photo of diane

diane

  • 1238 Posts
  • 121 Reply Likes
This is working for me with Sanja's code for the background image--see it at http://www.testvillage.yolasite.com/d.... Have you published the site yet?--images may not show until it is published.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello JenC

There may be a couple of reasons why your image is not showing:

1. Sometimes you need to update your site so that the latest information is cached.

2. Make sure that your file name is the same as what you have in your File Manager - it is case sensitive. Also be sure to include any spaces and dashes in your file name. It must be set up exactly the same.

Can you please give this a try and if you're still having trouble getting this to work. please do post your URL so that we can take a look at what's going on. Thanks.
Photo of JC

JC

  • 354 Posts
  • 15 Reply Likes
Sanja and Diane, thank you. Yours looks exactly right! Have not put online so no url as site not completed and do not wish others to see yet.
Wondered if it is possible for you to past the code in so I can see what it should be like? ie full code, CSS plus div. Then I should not go wrong!!!!
thks again.