Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [VB]Change BG picture of a DIV element
New Posts  All Forums:Forum Nav:

[VB]Change BG picture of a DIV element

post #1 of 3
Thread Starter 
Hey guys !
I'm working on my project and my teacher want it in VB -_-''

I know the right script in javascript, which is :
Code:
document.getElementById('header').style.backgroundImage="url(images/header1.jpg)"
This would change my header image to a different image.


Now, I got 3 buttons, each of em select a different picture.
I want when you click it, it save the button #(1,2 or 3) in cookies (done) and on page load it checks the cookie and set the picture.

Everything is done, I'm only missing the way in VBscript to change the 'header' background image to either 1-2 or 3.
I need a way to set the header background


One alternative I've came up with was to on buttonclick, swap the css class such as :
header.CssClass = "header"
header.CssClass = "header2"
header.CssClass = "header3"
That way, I got 3 differender header, with all the same parameters but different image links.
Yet header.CssClass = "header" gives me an error.

I first wanted to cross JS and VB but it's not working at all.

I would prefer a simple way to simply change that image.
Any ideas ?
post #2 of 3
Edit:
My bad I posted .NET code lol In the case of VBScript the following code should do what you want (though I once again could be wrong)

Code:
divTagName.Style.BackgroundImage = "url(folder\\image.png)"
(For the purpose of just incase someone wanted to see what i said)
I may be thinking wrong and I dont have a way to test it but wouldnt it be something close to

Code:
Me.BackgroundImage = System.Drawing.Image.FromFile("yourfile.jpg")
where "yourfile.jpg" would be image 1, 2 or 3 which you could wrap that in a if statement to produce something similar to

Code:
if(cookie = 1) then
Me.BackgroundImage = System.Drawing.Image.FromFile("picture1.jpg")
elseif(cookie = 2) then
Me.BackgroundImage = System.Drawing.Image.FromFile("picture2.jpg")
else
Me.BackgroundImage = System.Drawing.Image.FromFile("picture3.jpg")
end if
The above is of course simple psudocode. Though I could be horribly off on this account.
Edited by ByteMyASCII - 10/26/11 at 1:28pm
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 ASUS Crosshair 3 EVGA 465GTX 1GB 8GB DDR3 1600mhz GSkill/ADATA 
Hard DriveOSMonitorKeyboard
40GB Intel SSD 1TB Western Digital Black Edition Windows 7 x64 Pro Dual 21.5 Sceptre Saitek Eclipse 
PowerCaseMouseMouse Pad
850watt Silverstone Element Coolermaster Haf 932 Razer Lachesis Razer Vespula 
  hide details  
Reply
My System
(13 items)
 
  
CPUMotherboardGraphicsRAM
AMD Phenom II x4 955 ASUS Crosshair 3 EVGA 465GTX 1GB 8GB DDR3 1600mhz GSkill/ADATA 
Hard DriveOSMonitorKeyboard
40GB Intel SSD 1TB Western Digital Black Edition Windows 7 x64 Pro Dual 21.5 Sceptre Saitek Eclipse 
PowerCaseMouseMouse Pad
850watt Silverstone Element Coolermaster Haf 932 Razer Lachesis Razer Vespula 
  hide details  
Reply
post #3 of 3
Thread Starter 
I figured out

It was much more complicated than I expected and I needed JavaSCript to accomplish this, I went to see my teacher and he told me javascript would make it much easier so he gave me the okay to do it.

Here is what I needed to do : The DIV I wanted to change on the fly was unable to be changed from VB.
What I did, I replaced the DIV by an ASP: Panel and from there, everything went very smooth.
I could access my panel in my VB code much easier than with a simple DIV.

Here is the code I came up with and it's working 100%:

Code:
<%@ Page Language ="vb" Debug="true" Explicit="True" %>
<%@ Register TagPrefix="webdbpgm" TagName="bas" src="bas.ascx" %>
<%@ Import Namespace="System.Data" %>
<%@ Import NameSpace="System.Data.OleDb" %>
<script type="text/javascript">
var cookieName = "image"
function script()
{
   document.getElementById('header').style.backgroundImage="url(images/header.jpg)"
document.cookie = cookieName+"=1";
}
function script2()
{
document.getElementById('header').style.backgroundImage="url(images/header1.jpg)"
document.cookie = cookieName+"=2";
}
function script3()
{
document.getElementById('header').style.backgroundImage="url(images/header2.jpg)"
document.cookie = cookieName+"=3";
}
</script>
<script runat="server">
Sub Page_Load()
If (Request.Cookies("image") Is Nothing) Then
else If (Request.Cookies("image").Value = "1") Then
header.BackImageUrl = "http://www.overclock.net/images/header.jpg"
else If (Request.Cookies("image").Value = "2") Then
header.BackImageUrl = "http://www.overclock.net/images/header1.jpg"
else If (Request.Cookies("image").Value = "3") Then
header.BackImageUrl = "http://www.overclock.net/images/header2.jpg"
end if
End Sub
</script>
and this is the HTML part : instead of that code being in a DIV, I replaced the DIV by an asp panel which took about 20 minutes to figure out how they work since I never really used them.
Code:
<input type="button" id="btnLogin1" value=" 1 "
       onClick="javascript:script()" runat="server"/> &nbsp
       <input type="button" id="btnLogin2" value=" 2 "
       onClick="javascript:script2()"  runat="server"/> &nbsp
       <input type="button" id="btnLogin3" value=" 3 "
       onClick="javascript:script3()" runat="server" />
My first bug was if everything was writen in VB, those button wouldn't activate their appropriate functions, having some javascript did work as soon as I pasted the original javascript that I had on my first HTML/Javascript web site building class. Now this class is about VB/ASP but my teacher told me it's indeed much easier with Javascript.

He also told me ASP/VB is rarely used, it's just part of the course :-/


This script is used to change my header picture with different animals since my web site is a pet shop, once you change the picture is create a cookie and once you come back to the page it reads the cookie and display the last image used by the user. Default is 1st picture


Thanks for you input and if anyone have same problem just hit me up, I finaly found the anwser
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Web Coding
Overclock.net › Forums › Software, Programming and Coding › Coding and Programming › Web Coding › [VB]Change BG picture of a DIV element